import * as React from "react";
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";

type Props = SvgIconProps & {
  crossed?: boolean; // true = перечеркнуть
};

export default function GradientVisibilityToggleIcon({ crossed, sx, ...props }: Props) {
  const id = React.useId();

  return (
    <SvgIcon
      {...props}
      viewBox="0 0 24 24"
      sx={{
        ...sx,

        // анимация "рисования" линии
        "& .slash": {
          strokeDasharray: 100,
          strokeDashoffset: crossed ? 0 : 100,
          transition: "stroke-dashoffset 520ms ease",
        },
      }}
    >
      <defs>
        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#F27121" />
          <stop offset="70%" stopColor="#E940CD" />
          <stop offset="100%" stopColor="#8A2387" />
        </linearGradient>
      </defs>

      {/* сам "глаз" */}
      <path
        fill={`url(#${id})`}
        d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
      />

      {/* линия "перечёркивания" */}
      <path
        className="slash"
        d="M4 4 L20 20"
        fill="none"
        stroke={`url(#${id})`}
        strokeWidth="2.4"
        strokeLinecap="round"
      />
    </SvgIcon>
  );
}