"use client"

import { useCookieConsent } from "./cookie-consent"
import { useLocale } from "next-intl"
// Placeholder affiché si le consentement est refusé (réserve pour usage futur)
import { Play, ExternalLink, MapPin } from "lucide-react"

type IframeType = "youtube" | "linkedin" | "maps"

const ICONS: Record<IframeType, React.ElementType> = {
  youtube:  Play,
  linkedin: ExternalLink,
  maps:     MapPin,
}

const LABELS: Record<IframeType, { fr: string; en: string }> = {
  youtube:  { fr: "Vidéo YouTube",        en: "YouTube Video"      },
  linkedin: { fr: "Publication LinkedIn", en: "LinkedIn Post"      },
  maps:     { fr: "Carte interactive",    en: "Interactive Map"    },
}

interface Props {
  type: IframeType
  className?: string
  style?: React.CSSProperties
}

export default function CookieIframePlaceholder({ type, className, style }: Props) {
  const { accept } = useCookieConsent()
  const locale = useLocale()
  const isEn = locale === "en"
  const Icon = ICONS[type]
  const label = isEn ? LABELS[type].en : LABELS[type].fr

  return (
    <div
      className={`flex flex-col items-center justify-center bg-neutral-50 border border-dashed border-neutral-300 text-center px-6 py-10 gap-3 ${className ?? ""}`}
      style={style}
    >
      <Icon className="w-8 h-8 text-neutral-300" aria-hidden />
      <div>
        <p className="text-[11px] font-bold uppercase tracking-widest text-gray-500 mb-1.5">
          {label}
        </p>
        <p className="text-xs text-gray-400 leading-relaxed max-w-[220px]">
          {isEn
            ? "Accept cookies to display this content."
            : "Acceptez les cookies pour afficher ce contenu."}
        </p>
      </div>
      <button
        type="button"
        onClick={accept}
        className="mt-1 px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-white hover:opacity-80 transition-opacity"
        style={{ backgroundColor: "#d40924" }}
      >
        {isEn ? "Accept & display" : "Accepter & afficher"}
      </button>
    </div>
  )
}