import Image from "next/image";
import { ImageIcon } from "lucide-react";

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

type PortfolioCoverProps = {
  src: string | null;
  title: string;
  category?: string;
  sizes?: string;
  priority?: boolean;
  className?: string;
};

const DEFAULT_SIZES =
  "(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw";

/**
 * Project cover. Renders the stored image when present, otherwise a restrained
 * branded placeholder (owner will replace placeholders with real artwork).
 * Fills a positioned, aspect-sized parent (`relative` + `aspect-*`).
 */
export function PortfolioCover({
  src,
  title,
  category,
  sizes = DEFAULT_SIZES,
  priority = false,
  className,
}: PortfolioCoverProps) {
  if (src) {
    return (
      <Image
        src={src}
        alt={title}
        fill
        sizes={sizes}
        priority={priority}
        className={cn(
          "object-cover transition-transform duration-500 ease-out group-hover:scale-[1.04]",
          className,
        )}
      />
    );
  }

  const monogram = title.trim().charAt(0).toUpperCase() || "•";

  return (
    <div
      aria-hidden
      className={cn(
        "relative flex h-full w-full flex-col items-center justify-center gap-3 bg-surface-2",
        className,
      )}
    >
      <span className="pointer-events-none absolute -top-1/3 left-1/2 h-2/3 w-2/3 -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,hsl(var(--brand-primary)/0.12),transparent)]" />
      <span className="text-[clamp(3rem,7vw,4.5rem)] font-semibold leading-none text-foreground/12">
        {monogram}
      </span>
      <span className="inline-flex items-center gap-1.5 text-caption text-muted-foreground/70">
        <ImageIcon className="h-3.5 w-3.5" />
        {category}
      </span>
    </div>
  );
}