<script lang="ts">
  import type { Snippet } from 'svelte';
  import { Plus } from 'lucide-svelte';
  import LikeButton from './LikeButton.svelte';

  // Shared chrome for AlbumCard / ArtistCard / CompactTrackCard. Owns
  // the top-right Like + add-to-queue cluster and the bottom-right
  // menu slot — the bits that were drifting between the three cards
  // (focus-ring, play-overlay-adjacent positioning, button styling).
  //
  // Per-card data fetching + onPlay/onAdd logic stays in the calling
  // component; the wrapping element (a vs button) and art container
  // also stay there since their differences are load-bearing.
  //
  // stopPropagation is applied to both wrapper divs so clicks on the
  // action elements never bubble to the parent — works for both
  // <a>-wrapped cards (AlbumCard/ArtistCard) and <button>-wrapped
  // ones (CompactTrackCard).

  let {
    likeEntityType,
    likeEntityId,
    onAdd,
    addLabel,
    addDisabled = false,
    menu
  }: {
    likeEntityType: 'track' | 'album' | 'artist';
    likeEntityId: string;
    onAdd: (e: MouseEvent) => void;
    addLabel: string;
    addDisabled?: boolean;
    menu: Snippet;
  } = $props();
</script>

<!-- Like + Add to queue + Menu cluster. Hover-revealed so the
     default tile state is just the cover artwork — controls fade in
     when the user hovers the card or focuses any of the buttons
     (focus-within keeps it visible during keyboard navigation). -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
  class="absolute right-2 top-2 z-10 flex gap-1 opacity-0 transition-opacity duration-150
         group-hover:opacity-100 focus-within:opacity-100"
  onclick={(e) => e.stopPropagation()}
>
  <LikeButton entityType={likeEntityType} entityId={likeEntityId} />
  <button
    type="button"
    aria-label={addLabel}
    onclick={onAdd}
    disabled={addDisabled}
    class="rounded-full bg-surface px-2 py-1 text-sm text-text-secondary hover:text-text-primary focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50"
  >
    <Plus size={16} strokeWidth={1} />
  </button>
</div>
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
  class="absolute right-2 bottom-2 z-10 opacity-0 transition-opacity duration-150
         group-hover:opacity-100 focus-within:opacity-100"
  onclick={(e) => e.stopPropagation()}
>
  {@render menu()}
</div>
