import Image from "next/image";

/**
 * Gambar proyek — memakai screenshot asli bila tersedia,
 * jatuh kembali ke gradient abstrak grayscale + inisial bila tidak.
 */
const tones = [
  "radial-gradient(120% 120% at 20% 0%, #3d4245 0%, #16181a 55%, #0d0e10 100%)",
  "radial-gradient(120% 120% at 85% 10%, #454a4d 0%, #191b1d 55%, #0d0e10 100%)",
  "linear-gradient(160deg, #2c3033 0%, #101214 60%, #0b0c0e 100%)",
  "radial-gradient(130% 110% at 50% 100%, #3f4447 0%, #15171a 55%, #0d0e10 100%)",
  "linear-gradient(200deg, #26292c 0%, #121316 55%, #0b0c0e 100%)",
  "radial-gradient(110% 130% at 10% 90%, #393e41 0%, #141618 55%, #0d0e10 100%)",
];

export default function ProjectImage({
  title,
  tone,
  image,
  className = "",
}: {
  title: string;
  tone: number;
  image?: string;
  className?: string;
}) {
  if (image) {
    return (
      <div className={`relative overflow-hidden bg-ink ${className}`}>
        <Image
          src={image}
          alt={`Tangkapan layar ${title}`}
          fill
          sizes="(max-width: 640px) 92vw, (max-width: 1024px) 46vw, 31vw"
          className="object-cover grayscale transition-[filter] duration-500 group-hover:grayscale-0"
        />
        {/* garis bawah lembut agar teks kartu tetap menyatu */}
        <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/45 to-transparent" />
      </div>
    );
  }

  const initials = title
    .split(" ")
    .map((w) => w[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <div
      className={`relative overflow-hidden ${className}`}
      style={{ background: tones[tone % tones.length] }}
    >
      {/* blob glow lembut */}
      <div className="absolute -top-10 -right-10 size-44 rounded-full bg-panel-strong blur-3xl" />
      <div className="absolute -bottom-14 -left-8 size-52 rounded-full bg-panel-strong blur-3xl" />
      {/* pola titik */}
      <div className="dot-pattern absolute inset-0 opacity-60" />
      {/* inisial besar */}
      <div className="absolute inset-0 grid place-items-center">
        <span className="font-accent text-6xl font-light tracking-tight text-white/[0.16] select-none md:text-7xl">
          {initials}
        </span>
      </div>
      {/* garis bawah lembut */}
      <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/45 to-transparent" />
    </div>
  );
}