import NumberIcon from "@icons/NumberIcon";
import { Button, useTheme } from "@mui/material";
import { ReactNode } from "react";

interface Props {
  state: "active" | "done" | "inactive";
  onClick?: () => void;
  index: number;
  children?: ReactNode;
}

export default function InstallationStepButton({
  state = "done",
  index,
  onClick,
  children,
}: Props) {
  const theme = useTheme();

  const buttonColorByState: Record<Props["state"], string> = {
    active: "#FC712F",
    done: theme.palette.brightPurple.main,
    inactive: theme.palette.grey2.main,
  };

  const color = buttonColorByState[state];

  return (
    <Button
      onClick={onClick}
      sx={[
        {
          color,
          fontSize: "16px",
          "& .MuiButton-startIcon": {
            mr: "5px",
          },
        },
        state === "active" && {
          textDecoration: "underline",
          textDecorationColor: color,
        },
      ]}
      startIcon={
        <NumberIcon
          number={index}
          color={color}
          sx={{
            height: "26px",
            width: "26px",
          }}
        />
      }
    >
      {children}
    </Button>
  );
}
