import Image from "next/image";
import Link from "next/link";
import { FiArrowUpRight, FiPlay } from "react-icons/fi";
import type { Release } from "@/types";

export function ReleaseCard({
  release,
  priority = false,
}: {
  release: Release;
  priority?: boolean;
}) {
  return (
    <article className="release-card" data-cover-reveal>
      <Link
        href={`/musicas/${release.slug}`}
        className="release-cover"
        aria-label={`Ver detalhes de ${release.title}`}
      >
        <Image
          src={release.cover}
          alt={`Capa da música ${release.title}`}
          fill
          sizes="(max-width: 640px) 78vw, (max-width: 1024px) 42vw, 25vw"
          priority={priority}
        />
        <span className="release-play">
          <FiPlay />
        </span>
        <span className="release-index">{release.releaseDate}</span>
      </Link>
      <div className="release-card-copy">
        <div>
          <span>{release.style}</span>
          <h3>{release.title}</h3>
        </div>
        <Link
          href={`/musicas/${release.slug}`}
          aria-label={`Abrir ${release.title}`}
        >
          <FiArrowUpRight />
        </Link>
      </div>
    </article>
  );
}