import { iconVariants } from "./variants"

import type { IconProps } from "@/types/components/icon"

export default function StarFilledIcon({
  className,
  color,
  ...props
}: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <mask
        id="mask0_69_3249"
        style={{ maskType: "alpha" }}
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width="24"
        height="24"
      >
        <rect width="24" height="24" fill="#D9D9D9" />
      </mask>
      <g mask="url(#mask0_69_3249)">
        <path
          d="M11.9999 17.5625L7.81244 20.0875C7.63744 20.1958 7.45619 20.2417 7.26869 20.225C7.08119 20.2083 6.91661 20.1458 6.77494 20.0375C6.63328 19.9292 6.52494 19.7917 6.44994 19.625C6.37494 19.4583 6.36244 19.275 6.41244 19.075L7.52494 14.3125L3.82494 11.1125C3.66661 10.9708 3.56661 10.8104 3.52494 10.6312C3.48328 10.4521 3.49161 10.2792 3.54994 10.1125C3.60828 9.94583 3.70619 9.80417 3.84369 9.6875C3.98119 9.57083 4.15411 9.5 4.36244 9.475L9.23744 9.05L11.1374 4.5625C11.2208 4.37083 11.3416 4.22917 11.4999 4.1375C11.6583 4.04583 11.8249 4 11.9999 4C12.1749 4 12.3416 4.04583 12.4999 4.1375C12.6583 4.22917 12.7791 4.37083 12.8624 4.5625L14.7624 9.05L19.6374 9.475C19.8458 9.5 20.0187 9.57083 20.1562 9.6875C20.2937 9.80417 20.3916 9.94583 20.4499 10.1125C20.5083 10.2792 20.5166 10.4521 20.4749 10.6312C20.4333 10.8104 20.3333 10.9708 20.1749 11.1125L16.4749 14.3125L17.5874 19.075C17.6374 19.275 17.6249 19.4583 17.5499 19.625C17.4749 19.7917 17.3666 19.9292 17.2249 20.0375C17.0833 20.1458 16.9187 20.2083 16.7312 20.225C16.5437 20.2417 16.3624 20.1958 16.1874 20.0875L11.9999 17.5625Z"
          fill="#26201E"
        />
      </g>
    </svg>
  )
}
