import { Music } from "lucide-react";

export type MusicBadgeStyle = "disc" | "full" | "pill";

export function MusicBadge({
  trackName,
  artistName,
  artworkUrl,
  style = "disc",
}: {
  trackName: string;
  artistName: string;
  artworkUrl?: string;
  style?: MusicBadgeStyle;
}) {
  const disc = (
    <span className="w-10 h-10 rounded-full overflow-hidden shrink-0 border-2 border-white/70 bg-black/50 flex items-center justify-center animate-[spin_4s_linear_infinite]">
      {artworkUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={artworkUrl} alt="" className="w-full h-full object-cover" />
      ) : (
        <Music size={15} className="text-white" />
      )}
    </span>
  );

  if (style === "disc") return disc;

  if (style === "pill") {
    return (
      <span className="flex items-center gap-1.5 bg-black/55 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1.5 rounded-full whitespace-nowrap">
        <Music size={12} /> {trackName}
      </span>
    );
  }

  // "full" — disc plus track details, closest to the Facebook/Instagram style.
  return (
    <span className="flex items-center gap-2.5 bg-black/55 backdrop-blur-sm pl-1.5 pr-3.5 py-1.5 rounded-full max-w-[260px]">
      {disc}
      <span className="min-w-0 leading-tight">
        <span className="block text-white text-xs font-bold truncate">{trackName}</span>
        <span className="block text-white/70 text-[11px] truncate">{artistName}</span>
      </span>
    </span>
  );
}