<script lang="ts">
  import IconCalendar from '~icons/lucide/calendar'

  interface Props {
    id: string
    name: string
    description: string
    image: string
    tags?: string[]
    endDate?: Date | null
  }

  let { id, name, description, image, tags = [], endDate = null }: Props = $props()

  // svelte-ignore state_referenced_locally
    const displayYear = endDate ? new Date(endDate).getFullYear() : 'Ongoing'
</script>

<div class="group h-full w-full transition-all duration-300 hover:translate-y-[-4px]">
  <a
    class="flex flex-col h-full w-full rounded-2xl overflow-hidden bg-card hover:shadow-lg transition-all duration-300 border border-card-foreground/10"
    href={`/projects/${id}`}
    aria-label="Project link"
  >
    <div class="aspect-16/9 w-full overflow-hidden">
      <img
        alt={name}
        src={image}
        class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
        loading="lazy"
      />
    </div>
    <div class="flex flex-col justify-between p-5 grow">
      <div>
        <h3 class="text-xl font-medium text-foreground mb-2">{name}</h3>
        <p class="text-sm text-muted-foreground line-clamp-2 mb-4">
          {description || "An innovative project showcasing creativity and technical skills"}
        </p>
      </div>
      <div class="flex flex-wrap justify-between items-center mt-auto pt-3 border-t border-border/40">
        <div class="flex flex-wrap gap-2">
          {#each tags.slice(0, 2) as tag}
            <span class="text-xs px-2 py-1 rounded-full bg-secondary/80 text-primary font-medium">{tag}</span>
          {/each}
          {#if tags.length > 2}
            <span class="text-xs px-2 py-1 rounded-full bg-secondary/80 text-primary font-medium">+{tags.length - 2}</span>
          {/if}
        </div>
        <p class="text-xs font-medium text-muted-foreground flex items-center">
          <IconCalendar class="h-3 w-3 mr-1" />
          {displayYear}
        </p>
      </div>
    </div>
  </a>
</div>
