import { cn } from "@/lib/utils";

/**
 * Typographic placeholder book cover in the brand system, until real cover
 * artwork is supplied. Alternates jungle-green / charcoal / terracotta grounds
 * with gold lettering.
 */
const palettes = {
  jungle: "bg-jungle text-ivory",
  charcoal: "bg-charcoal text-ivory",
  terra: "bg-terra text-ivory",
} as const;

export function BookCover({
  title,
  subtitle,
  index = 0,
  className,
}: {
  title: string;
  subtitle?: string | null;
  index?: number;
  className?: string;
}) {
  const paletteKeys = ["jungle", "charcoal", "terra"] as const;
  const key = paletteKeys[index % paletteKeys.length] ?? "jungle";
  const palette = palettes[key];

  return (
    <div
      className={cn(
        "relative flex aspect-2/3 w-full flex-col justify-between overflow-hidden rounded-lg border border-ivory/10 p-6 shadow-xl",
        palette,
        className,
      )}
    >
      <span
        aria-hidden="true"
        className="monogram-watermark absolute -right-4 -top-6 text-[7rem]"
      >
        EJ
      </span>
      <div className="relative flex flex-col gap-3">
        <span className="eyebrow text-[0.5rem] text-gold-light">Eva Wanjiru Jason</span>
        <span className="hairline w-10 opacity-70" />
        <h3 className="font-display text-2xl leading-snug">{title}</h3>
      </div>
      {subtitle ? (
        <p className="relative text-xs leading-relaxed opacity-80">{subtitle}</p>
      ) : (
        <span className="relative font-script text-lg text-gold-light">Eva Shii Jason</span>
      )}
    </div>
  );
}