import { iconVariants } from "./variants"

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

export default function ChevronDownIcon({
  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}
    >
      <path
        d="M11.9936 14.436L19.5847 7.43997C19.8278 7.21597 20.1164 7.10597 20.4506 7.10997C20.7848 7.11397 21.0735 7.22797 21.3165 7.45197C21.5596 7.67597 21.6811 7.94197 21.6811 8.24997C21.6811 8.55797 21.5596 8.82397 21.3165 9.04797L13.3738 16.356C13.1742 16.54 12.9571 16.674 12.7228 16.758C12.4884 16.842 12.2453 16.884 11.9936 16.884C11.7419 16.884 11.4988 16.842 11.2644 16.758C11.0301 16.674 10.813 16.54 10.6134 16.356L2.67069 9.03597C2.42763 8.81197 2.30827 8.54797 2.31261 8.24397C2.31695 7.93997 2.44065 7.67597 2.68371 7.45197C2.92676 7.22797 3.21539 7.11597 3.54959 7.11597C3.88379 7.11597 4.17242 7.22797 4.41548 7.45197L11.9936 14.436Z"
        fill="#26201E"
      />
    </svg>
  )
}
