import Box from "@mui/material/Box";

type ArrowLeftIconProps = {
  color?: string;
  size?: number;
};

export function ArrowLeftIcon({
  color = "#98A2B3",
  size = 16,
}: ArrowLeftIconProps) {
  return (
    <Box
      component="svg"
      viewBox="0 0 20 20"
      aria-hidden="true"
      sx={{ width: size, height: size, color }}
    >
      <path
        d="M12.5 5 7.5 10l5 5"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.8"
      />
    </Box>
  );
}

export function EyeIcon() {
  return (
    <Box
      component="svg"
      viewBox="0 0 24 24"
      aria-hidden="true"
      sx={{ width: 20, height: 20, color: "#8f95a3" }}
    >
      <path
        d="M2 12C4.4 7.8 8 5.7 12 5.7s7.6 2.1 10 6.3c-2.4 4.2-6 6.3-10 6.3S4.4 16.2 2 12Z"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.7"
      />
      <circle
        cx="12"
        cy="12"
        r="3.1"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.7"
      />
    </Box>
  );
}