import React from 'react';

type ChevronPosition = 'left' | 'right' | 'down' | 'up';

type ChevronIconProps = {
  width?: number;
  height?: number;
  color?: string;
  position?: ChevronPosition;
};

const DIRECTION = {
  left: 90,
  right: -90,
  down: 0,
  up: -180,
};

export const ChevronIcon = ({
  width = 18,
  height = 18,
  color = '#5D5D6B',
  position = 'down',
}: ChevronIconProps) => (
  <svg
    width={width}
    height={height}
    fill="none"
    viewBox="0 0 18 18"
    xmlns="http://www.w3.org/2000/svg"
    style={{
      transform: `rotate(${DIRECTION[position]}deg)`,
      transition: '0.15s',
    }}
  >
    <path
      d="M6.09376 6.75001L9.00376 9.66002L11.9138 6.75001C12.2063 6.45751 12.6788 6.45751 12.9713 6.75001C13.2638 7.04251 13.2638 7.51501 12.9713 7.80751L9.52876 11.25C9.23626 11.5425 8.76376 11.5425 8.47126 11.25L5.02876 7.80751C4.73626 7.51501 4.73626 7.04251 5.02876 6.75001C5.32126 6.46501 5.80126 6.45751 6.09376 6.75001Z"
      fill={color}
    />
  </svg>
);