<script lang="ts">
  import { cn } from '$lib/utils'
  import type { ImageCarouselItem } from '.'
  import * as Carousel from '../carousel'

  const {
    item,
    class: className,
    isSelected,
    onclick,
  }: {
    item: ImageCarouselItem
    class?: string
    isSelected?: boolean
    onclick?: () => void
  } = $props()

  const itemClass = $derived(
    cn(
      'object-cover rounded-lg',
      isSelected
        ? 'border-2 transition-all border-blue-600 dark:border-blue-500'
        : 'border-2 transition-all border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600',
      !item.aspect || item.aspect === '1:1' ? 'aspect-square' : '',
      item.aspect === '16:9' ? 'aspect-video' : '',
      item.aspect === '9:16' ? 'aspect-9/16' : '',
      item.aspect === '4:3' ? 'aspect-4/3' : '',
    ),
  )
</script>

<Carousel.Item {onclick} class={className}>
  <img src={item.image} alt={item.alt} class={itemClass} />
</Carousel.Item>
