Age Gate

"use client";

import { motion } from "framer-motion";
import { ShieldCheck } from "lucide-react";

interface SpecialtyAgeGateProps { brandName?: string; title?: string; message?: string; confirmLabel?: string; denyLabel?: string; denyUrl?: string; }
const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];

export default function SpecialtyAgeGate({ brandName = "Brand", title = "Verification de l'age", message = "", confirmLabel = "J'ai plus de 18 ans", denyLabel = "Je suis mineur", denyUrl = "#" }: SpecialtyAgeGateProps) {
  return (
    <section className="min-h-screen flex items-center justify-center px-6" style={{ background: "var(--color-background-dark, var(--color-background))" }}>
      <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.6, ease }} className="w-full max-w-md text-center rounded-xl p-10" style={{ background: "var(--color-background-card)", border: "1px solid var(--color-border)" }}>
        <ShieldCheck size={36} className="mx-auto mb-4" style={{ color: "var(--color-accent)" }} />
        <p className="text-sm font-medium tracking-wide uppercase mb-2" style={{ color: "var(--color-accent)" }}>{brandName}</p>
        <h1 className="text-xl font-bold mb-3" style={{ color: "var(--color-foreground)" }}>{title}</h1>
        {message && <p className="text-sm leading-relaxed mb-8" style={{ color: "var(--color-foreground-muted)" }}>{message}</p>}
        <div className="flex flex-col gap-3">
          <button className="w-full py-3 rounded-lg text-sm font-semibold transition-opacity hover:opacity-90" style={{ background: "var(--color-accent)", color: "var(--color-background)" }}>{confirmLabel}</button>
          <a href={denyUrl} className="w-full py-3 rounded-lg text-sm font-medium transition-opacity hover:opacity-80 block" style={{ border: "1px solid var(--color-border)", color: "var(--color-foreground-muted)", textDecoration: "none" }}>{denyLabel}</a>
        </div>
      </motion.div>
    </section>
  );
}