"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

export function CookieBanner() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setVisible(!localStorage.getItem("elit_cookie_choice"));
  }, []);

  if (!visible) return null;

  const choose = (choice: string) => {
    localStorage.setItem("elit_cookie_choice", choice);
    setVisible(false);
  };

  return (
    <div className="fixed bottom-4 left-1/2 z-50 w-[calc(100%-28px)] max-w-3xl -translate-x-1/2 rounded border border-[#E5E1D8] bg-white p-4 shadow-xl">
      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <p className="text-sm text-[#555]">This website uses cookies to enhance your experience. You may accept or reject cookies.</p>
        <div className="flex flex-wrap gap-2">
          <button className="btn btn-primary" onClick={() => choose("accepted")}>Accept</button>
          <button className="btn btn-secondary" onClick={() => choose("rejected")}>Reject</button>
          <Link className="btn btn-secondary" href="/legal/cookie-policy">Cookie Policy</Link>
        </div>
      </div>
    </div>
  );
}