<script lang="ts">
  import Badge from './Badge.svelte'
  import IconHash from '~icons/lucide/hash'

  interface BlogEntry {
    id: string
    collection: string
    data: {
      title: string
      description: string
      tags?: string[]
    }
  }

  interface Props {
    entry: BlogEntry
  }

  let { entry }: Props = $props()
</script>

<div class="hover:bg-secondary/50 rounded-xl border p-4 transition-colors duration-300 ease-in-out">
  <a
    href={`/${entry.collection}/${entry.id}`}
    class="flex flex-col gap-4 sm:flex-row"
  >
    <div class="grow min-w-0">
      <h3 class="mb-1 text-lg font-medium wrap-break-word">{entry.data.title}</h3>
      <p class="text-muted-foreground mb-2 text-sm">
        {entry.data.description}
      </p>

      {#if entry.data.tags}
        <div class="flex flex-wrap gap-2">
          {#each entry.data.tags as tag}
            <Badge variant="secondary" class="flex items-center gap-x-1">
              <IconHash class="size-3" />
              {tag}
            </Badge>
          {/each}
        </div>
      {/if}
    </div>
  </a>
</div>
