import { ICONS, type StreamingLink } from "@/lib/release";
import { TrptkLogo } from "../icons/TrptkLogo";
import { IconButtonLink } from "@/components/IconButton";

type Props = {
  releaseName?: string;
  links: StreamingLink[];
};

function StreamingLinkButton({
  link,
  isFirst,
}: {
  link: StreamingLink;
  isFirst?: boolean;
}) {
  const Icon = ICONS[link.icon];

  return (
    <IconButtonLink
      href={link.url}
      target="_blank"
      rel="noopener noreferrer"
      className={[
        "flex items-center justify-center text-lg",
        isFirst ? "col-span-3" : "aspect-square",
      ].join(" ")}
    >
      {isFirst ? <TrptkLogo width={50} /> : <Icon />}
    </IconButtonLink>
  );
}

export function StreamingLinks({ releaseName, links }: Props) {
  if (links.length === 0) return <p>No streaming links yet.</p>;

  return (
    <div className="text-center">
      <p className="mb-5 text-sm text-lightsec dark:text-darksec">
        Listen to or buy
        <span className="font-silkasb"> {releaseName} </span>on:
      </p>

      <div className="inline-grid grid-cols-3 gap-3">
        {links.map((l, idx) => (
          <StreamingLinkButton key={l.label} link={l} isFirst={idx === 0} />
        ))}
      </div>
    </div>
  );
}