import { Box, IconButton, Typography } from "@mui/material";
import { useState } from "react";

type Props = {
  text: string;
  icon: any;
};
export default function SwichResult({ text, icon }: Props) {
  const [active, setActive] = useState<boolean>(false);
  return (
    <Box
      sx={{
        p: "14px",
        mb: "14px",
        display: "flex",
        justifyContent: "space-between",
        border: "1px solid #9A9AAF",
        borderRadius: "8px",
        alignItems: "center",
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "left" }}>
        <img src={icon} alt="icon" />
        <Typography sx={{ color: "#9A9AAF", ml: "14px" }}>{text}</Typography>
      </Box>

      <IconButton disableRipple onClick={() => setActive(!active)}>
        <svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
          <rect
            x={active ? "23" : "1"}
            y="1"
            width="28"
            height="28"
            rx="14"
            fill="white"
            stroke={active ? "#7E2AEA" : "#9A9AAF"}
            stroke-width="2"
          />
        </svg>
      </IconButton>
    </Box>
  );
}