import Image from "next/image";
import Link from "next/link";
import { FiArrowUpRight, FiPlay } from "react-icons/fi";
import type { Release } from "@/types";
import { AudioVisualizer } from "@/components/audio-visualizer";
import { StreamingLinks } from "@/components/streaming-links";

export function FeaturedRelease({ release }: { release: Release }) {
  return (
    <section className="section featured-section" id="destaque">
      <div className="shell featured-grid">
        <div className="featured-cover" data-cover-reveal>
          <div className="featured-cover-frame">
            <Image
              src={release.cover}
              alt={`Capa de ${release.title}`}
              fill
              sizes="(max-width: 900px) 88vw, 44vw"
              priority
            />
          </div>
          <div className="featured-disc" aria-hidden="true">
            <div />
          </div>
          <span className="featured-stamp">LANÇAMENTO EM DESTAQUE</span>
        </div>

        <div className="featured-copy" data-reveal>
          <span className="eyebrow">NOVO SOM / NOVA MENSAGEM</span>
          <div className="featured-title-row">
            <h2>{release.title}</h2>
            <AudioVisualizer bars={11} />
          </div>
          <p className="featured-lead">{release.description}</p>
          <blockquote>“{release.lyricsExcerpt}”</blockquote>
          <dl className="release-facts">
            <div>
              <dt>Atmosfera</dt>
              <dd>{release.style}</dd>
            </div>
            <div>
              <dt>Tema</dt>
              <dd>{release.theme}</dd>
            </div>
            <div>
              <dt>Referência</dt>
              <dd>{release.biblicalReference}</dd>
            </div>
          </dl>
          <div className="featured-actions">
            <a
              href={release.spotifyUrl}
              target="_blank"
              rel="noreferrer"
              className="primary-button"
            >
              <FiPlay />
              Ouvir agora
            </a>
            <Link
              href={`/musicas/${release.slug}`}
              className="text-button"
            >
              Ver a mensagem
              <FiArrowUpRight />
            </Link>
          </div>
          <StreamingLinks
            ids={["spotify", "appleMusic", "youtubeMusic", "youtube"]}
            context={`featured_${release.slug}`}
            compact
          />
        </div>
      </div>
    </section>
  );
}