import { iconVariants } from "./variants"

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

export default function ChevronDownSmallIcon({
  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.6876 15.1482C11.5558 15.1482 11.4313 15.1243 11.3142 15.0766C11.1972 15.0289 11.0909 14.9574 10.9955 14.862L6.2818 10.1483C6.09393 9.96039 6 9.73203 6 9.46317C6 9.19432 6.0954 8.96449 6.2862 8.77369C6.477 8.58289 6.70683 8.48749 6.97569 8.48749C7.24454 8.48749 7.47351 8.58203 7.6626 8.77111L11.685 12.7935L15.7074 8.77111C15.8965 8.58203 16.1255 8.48749 16.3943 8.48749C16.6632 8.48749 16.893 8.58289 17.0838 8.77369C17.2746 8.96449 17.37 9.19432 17.37 9.46317C17.37 9.73203 17.2761 9.96039 17.0882 10.1483L12.3745 14.862C12.2791 14.9574 12.1737 15.0289 12.0584 15.0766C11.943 15.1243 11.8194 15.1482 11.6876 15.1482Z"
        fill="#26201E"
      />
    </svg>
  )
}
