import React from "react";
import { IconProps } from "../Icon.types";

type DirectionType = "right" | "left" | "up" | "down";

interface CaretIconProps extends IconProps {
  direction?: DirectionType;
}

const directionMap: { [key in DirectionType]: string } = {
  right: "",
  left: "rotate-180",
  up: "-rotate-90",
  down: "rotate-90",
};

const Caret = ({
  className,
  size,
  color = "#1A1A1A",
  direction = "right",
}: CaretIconProps) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 25 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={`${directionMap[direction]} ${className}`}
    >
      <path d="M8.5 21L17.5 12L8.5 3" stroke={color} />
    </svg>
  );
};

export default Caret;