---
import { Icon } from 'astro-icon/components'

import { cn } from '../lib/cn'

type Props = {
  active: boolean
  sortOrder: 'asc' | 'desc' | null | undefined
  class?: string
}

const { active, sortOrder, class: className }: Props = Astro.props
---

{
  active && sortOrder ? (
    sortOrder === 'asc' ? (
      <Icon name="ri:arrow-down-s-line" class={cn('inline-block size-4', className)} />
    ) : (
      <Icon name="ri:arrow-up-s-line" class={cn('inline-block size-4', className)} />
    )
  ) : (
    <Icon name="ri:expand-up-down-line" class={cn('inline-block size-4 text-current/50', className)} />
  )
}