"use client";

import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

/**
 * Album/artist header. The artwork itself, blown up and blurred, is the
 * panel's own backdrop — cheaper and more faithful than trying to synthesise
 * a gradient from the extracted accent, and it reads as the record rather
 * than as a themed box.
 */
export function Hero({
  kind,
  title,
  art,
  round,
  by,
  facts,
  actions,
}: {
  kind: string;
  title: string;
  art: string | null;
  round?: boolean;
  by?: React.ReactNode;
  facts?: (string | null | undefined)[];
  actions?: React.ReactNode;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 14 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
      className="glass relative mb-5 flex flex-col sm:flex-row items-center sm:items-stretch
                 gap-4 sm:gap-5 overflow-hidden rounded-panel p-5 text-center sm:text-left"
    >
      {art && (
        /* eslint-disable-next-line @next/next/no-img-element */
        <img
          src={art}
          alt=""
          aria-hidden
          className="absolute inset-0 z-0 h-full w-full scale-[1.35] object-cover
                     opacity-40 blur-[46px] saturate-[1.8]"
        />
      )}
      <div className="absolute inset-0 z-[1] bg-gradient-to-r from-[var(--scrim)] to-[var(--scrim-2)]" />

      {art && (
        <motion.img
          layoutId={`art-${title}`}
          src={art}
          alt=""
          className={cn(
            "relative z-[2] w-[132px] h-[132px] sm:w-[150px] sm:h-[150px] shrink-0 object-cover",
            "bg-faint shadow-[0_14px_40px_rgb(0_0_0/0.5)]",
            round ? "rounded-full" : "rounded-2xl",
          )}
        />
      )}

      <div className="relative z-[2] flex min-w-0 flex-1 flex-col justify-center">
        <div className="mb-1.5 text-[11px] font-bold uppercase tracking-[1px] text-accent">
          {kind}
        </div>
        <h2 className="mb-2 text-2xl sm:text-[29px] font-bold leading-[1.14] tracking-[-0.8px]">
          {title}
        </h2>
        {by && <div className="mb-2.5 text-[15px] font-semibold">{by}</div>}
        {facts && (
          <div className="mb-3.5 flex flex-wrap justify-center sm:justify-start gap-1.5">
            {facts.filter(Boolean).map((f, i) => (
              <span
                key={i}
                className="glass-hi rounded-full px-2.5 py-0.5 text-[11.5px] text-dim"
              >
                {f}
              </span>
            ))}
          </div>
        )}
        {actions && (
          <div className="flex flex-wrap justify-center sm:justify-start gap-2.5">{actions}</div>
        )}
      </div>
    </motion.div>
  );
}