import type { SVGProps } from 'react'

type Props = SVGProps<SVGSVGElement> & {
  sorted: 'asc' | 'desc' | false
}

export const CaretSortIcon = ({ sorted, ...props }: Props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="10"
    height="12"
    viewBox="0 0 10 12"
    fill="none"
    {...props}
  >
    <path
      d="M2.5 7.95312L5.10316 10.5562L7.70625 7.95312"
      stroke={
        sorted === 'asc' ? 'var(--foreground)' : 'var(--muted-more-foreground)'
      }
      strokeWidth="1.5"
    />
    <path
      d="M2.5 3.91561L5.10309 1.3125L7.70619 3.91561"
      stroke={
        sorted === 'desc' ? 'var(--foreground)' : 'var(--muted-more-foreground)'
      }
      strokeWidth="1.5"
    />
  </svg>
)