"use client";

import { useMemo } from "react";
import type { SanityImageSource } from "@sanity/image-url";
import { IoDiscOutline, IoPlayOutline } from "react-icons/io5";
import { usePlayer } from "@/components/player/PlayerContext";
import { IconButton, IconButtonLink } from "@/components/IconButton";
import { buildPlayerTracks, type TrackData } from "@/components/release/Tracklist";

type Props = {
  tracks: TrackData[];
  albumCover?: SanityImageSource;
  albumArtist?: string;
  releaseSlug: string;
};

export function FeaturedReleaseActions({ tracks, albumCover, albumArtist, releaseSlug }: Props) {
  const { loadPlaylist } = usePlayer();

  const playerTracks = useMemo(
    () => buildPlayerTracks(tracks, albumCover, albumArtist, releaseSlug),
    [tracks, albumCover, albumArtist, releaseSlug],
  );

  return (
    <div className="mt-4 flex gap-3">
      <IconButtonLink href={`/release/${releaseSlug}`} aria-label="View release">
        <IoDiscOutline />
      </IconButtonLink>
      <IconButton
        onClick={() => loadPlaylist(playerTracks, 0)}
        disabled={playerTracks.length === 0}
        aria-label="Play album"
      >
        <IoPlayOutline />
      </IconButton>
    </div>
  );
}