import { cookies, headers } from "next/headers";
import Link from "next/link";

interface ProtectedImageProps {
  src: string;
  alt: string;
  className?: string;
  width?: number;
  height?: number;
}

export default async function ProtectedImage({
  src,
  alt,
  className,
  width,
  height,
}: ProtectedImageProps) {
  const cookieStore = await cookies();
  const headersList = await headers();

  const country = headersList.get("x-country") || headersList.get("cf-ipcountry") || "";
  const isUK = country === "GB";
  const ageVerified = cookieStore.get("age_verified_uk")?.value === "1";
  const isBlocked = isUK && !ageVerified;

  if (isBlocked) {
    return (
      <div
        className={`relative overflow-hidden bg-zinc-800/80 flex items-center justify-center ${className || ""}`}
        style={{ width: width || "100%", height: height || 200 }}
      >
        <div className="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-900" />
        <div className="relative z-10 flex flex-col items-center gap-2 text-center px-4">
          <svg
            className="w-8 h-8 text-zinc-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
            />
          </svg>
          <Link
            href="/age-verify"
            className="text-xs text-zinc-400 hover:text-gold transition-colors underline underline-offset-2"
          >
            Verify age to view
          </Link>
        </div>
      </div>
    );
  }

  return (
    <img
      src={src}
      alt={alt}
      className={className}
      width={width}
      height={height}
      loading="lazy"
    />
  );
}