<script lang="ts">
  import type { ArtistRef } from '$lib/api/types';
  import LikeButton from './LikeButton.svelte';

  let { artist }: { artist: ArtistRef } = $props();

  const initial = $derived(artist.name ? artist.name.charAt(0).toUpperCase() : '');
  const countLabel = $derived(artist.album_count === 1 ? '1 album' : `${artist.album_count} albums`);
</script>

<div class="relative flex items-center gap-3 border-b border-border px-3 py-3 hover:bg-surface-hover">
  <a
    href={`/artists/${artist.id}`}
    class="absolute inset-0 focus-visible:ring-2 focus-visible:ring-accent"
    aria-label={artist.name}
  ></a>
  <span
    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-surface font-semibold relative"
    aria-hidden="true"
  >
    {initial}
  </span>
  <span class="flex-1 truncate relative">{artist.name}</span>
  <span class="text-sm text-text-secondary relative">{countLabel}</span>
  <span class="relative">
    <LikeButton entityType="artist" entityId={artist.id} />
  </span>
  <span class="text-text-secondary relative" aria-hidden="true">›</span>
</div>
