import { Box } from "@mui/material";
import { FC, ReactNode } from "react";

interface SettingsItemProps {
  settingsDescription: ReactNode;
  settingsInput?: ReactNode;
  settingsInputBottom?: ReactNode;
  settingsInputLong?: ReactNode;
}

export const SettingsItem: FC<SettingsItemProps> = ({
  settingsDescription,
  settingsInput,
  settingsInputBottom,
  settingsInputLong,
}) => {
  return (
    <Box
      sx={{
        mb: 2,
      }}
    >
      <Box
        sx={{
          alignItems: "center",
          display: "flex",
          justifyContent: "space-between",
          width: "100%",
        }}
      >
        <Box sx={{ width: "60%" }}>{settingsDescription}</Box>
        {settingsInput && (
          <Box
            sx={{
              display: "flex",
              justifyContent: "flex-end",
              maxWidth: "100px",
              width: "30%",
            }}
          >
            {settingsInput}
          </Box>
        )}
        {settingsInputLong && (
          <Box
            sx={{
              display: "flex",
              justifyContent: "flex-end",
            }}
          >
            {settingsInputLong}
          </Box>
        )}
      </Box>
      {settingsInputBottom && (
        <Box
          sx={{
            alignItems: "center",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            px: 2,
          }}
        >
          {settingsInputBottom}
        </Box>
      )}
    </Box>
  );
};
