import { iconVariants } from "./variants"

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

export default function ExpandIcon({ className, color, ...props }: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M14.7569 4.36451C14.7569 3.87465 15.154 3.47753 15.6439 3.47753H19.6353C20.1252 3.47753 20.5223 3.87465 20.5223 4.36451V8.35591C20.5223 8.84577 20.1252 9.24288 19.6353 9.24288C19.1454 9.24288 18.7483 8.84577 18.7483 8.35591V5.25149H15.6439C15.154 5.25149 14.7569 4.85437 14.7569 4.36451Z"
        fill="#26201E"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20.2625 3.73732C20.6089 4.08371 20.6089 4.64531 20.2625 4.9917L15.2732 9.98094C14.9269 10.3273 14.3653 10.3273 14.0189 9.98094C13.6725 9.63456 13.6725 9.07295 14.0189 8.72657L19.0081 3.73732C19.3545 3.39094 19.9161 3.39094 20.2625 3.73732Z"
        fill="#26201E"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M4.36476 14.7567C4.85462 14.7567 5.25174 15.1538 5.25174 15.6437V18.7481H8.35616C8.84602 18.7481 9.24313 19.1452 9.24313 19.6351C9.24313 20.1249 8.84602 20.522 8.35616 20.522H4.36476C3.8749 20.522 3.47778 20.1249 3.47778 19.6351V15.6437C3.47778 15.1538 3.8749 14.7567 4.36476 14.7567Z"
        fill="#26201E"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M9.98119 14.0186C10.3276 14.365 10.3276 14.9266 9.98119 15.273L4.99195 20.2623C4.64556 20.6086 4.08396 20.6086 3.73757 20.2623C3.39119 19.9159 3.39119 19.3543 3.73757 19.0079L8.72682 14.0186C9.0732 13.6722 9.63481 13.6722 9.98119 14.0186Z"
        fill="#26201E"
      />
    </svg>
  )
}
