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

interface SettingsItemProps {
  defaultText?: string;
  description: ReactNode;
  input?: ReactNode;
  inputBottom?: ReactNode;
  inputLong?: ReactNode;
}

export const SettingsItem: FC<SettingsItemProps> = ({ defaultText, description, input, inputBottom, inputLong }) => {
  return (
    <Box
      sx={{
        mb: 2,
      }}
    >
      <Box
        sx={{
          alignItems: "center",
          display: "flex",
          justifyContent: "space-between",
          width: "100%",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            width: "60%",
          }}
        >
          <Typography>{description}</Typography>
          {defaultText && (
            <Typography
              color="lightgrey"
              variant="caption"
            >
              Default: {defaultText}
            </Typography>
          )}
        </Box>
        {input && (
          <Box
            sx={{
              display: "flex",
              justifyContent: "flex-end",
              maxWidth: "100px",
              width: "30%",
            }}
          >
            {input}
          </Box>
        )}
        {inputLong && (
          <Box
            sx={{
              display: "flex",
              justifyContent: "flex-end",
            }}
          >
            {inputLong}
          </Box>
        )}
      </Box>
      {inputBottom && (
        <Box
          sx={{
            alignItems: "center",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            px: 2,
          }}
        >
          {inputBottom}
        </Box>
      )}
    </Box>
  );
};
