import {
  Box,
  Button,
  IconButton,
  SxProps,
  Theme,
  Typography,
} from "@mui/material";

import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

const priceButtonsArray: { title: string; type: string; sx: SxProps<Theme> }[] =
  [
    {
      title: "10000 ₽",
      type: "10000 ₽",
      sx: {
        width: "110px",
        height: "48px",
        border: "1px solid #9A9AAF",
      },
    },
    {
      title: "Ровно",
      type: "smooth",
      sx: {
        width: "94px",
        height: "48px",
        border: "1px solid #9A9AAF",
      },
    },
    {
      title: "От и до",
      type: "fromAndTo",
      sx: {
        width: "93px",
        height: "48px",
        border: "1px solid #9A9AAF",
        whiteSpace: "nowrap",
      },
    },
    {
      title: "ƒ",
      type: "ƒ",
      sx: {
        width: "38px",
        height: "48px",
        border: "1px solid #9A9AAF",
      },
    },
    {
      title: "Скидка",
      type: "discount",
      sx: {
        width: "93px",
        height: "48px",
        border: "1px solid #9A9AAF",
      },
    },
  ];

type Props = {
  ButtonsActive: (index: number, type: string) => void;
  priceButtonsActive: number | undefined;
};

export default function PriceButtons({
  ButtonsActive,
  priceButtonsActive,
}: Props) {
  return (
    <Box>
      <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
        <Typography component={"h6"} sx={{ weight: "500", fontSize: "18px" }}>
          Стоимость
        </Typography>
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
          <DeleteIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
      </Box>
      <Box
        component="div"
        sx={{ display: "flex", flexWrap: "wrap", gap: "8px", mb: "20px" }}
      >
        {priceButtonsArray.map(({ title, type, sx }, index) => (
          <Button
            onClick={() => ButtonsActive(index, type)}
            key={title}
            sx={{
              bgcolor: priceButtonsActive === index ? "#7E2AEA" : "#F2F3F7",
              color: priceButtonsActive === index ? "#FFFF" : "#9A9AAF",
              ...sx,
            }}
          >
            {title}
          </Button>
        ))}
      </Box>
    </Box>
  );
}
