"use client";

import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { confirmAge } from "@/lib/actions/age-verification";

export function AgeGate() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleConfirm = () => {
    startTransition(async () => {
      await confirmAge();
      router.refresh();
    });
  };

  const handleExit = () => {
    window.location.href = "https://www.google.com";
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-6">
      <div className="max-w-md rounded-lg bg-warm-white p-8 text-center shadow-xl">
        <h2>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/wordmark.png"
            alt="Cellar Labels"
            className="mx-auto h-10 w-auto"
          />
        </h2>
        <p className="mt-4 text-charcoal">
          This site contains content related to pipe tobacco and is intended
          for adults of legal smoking age. Please confirm your age to
          continue.
        </p>
        <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
          <button
            type="button"
            onClick={handleConfirm}
            disabled={isPending}
            className="rounded-full bg-terracotta px-6 py-2 font-medium text-white hover:bg-terracotta/90 disabled:opacity-60"
          >
            I am 21 or older
          </button>
          <button
            type="button"
            onClick={handleExit}
            className="rounded-full border border-charcoal/20 px-6 py-2 font-medium text-charcoal hover:bg-charcoal/5"
          >
            Exit
          </button>
        </div>
      </div>
    </div>
  );
}