"use client";

import { useState } from "react";
import Link from "next/link";
import { X } from "lucide-react";
import { Button } from "@/components/ui/button";

export function DemoBanner() {
  const [dismissed, setDismissed] = useState(false);

  if (dismissed) return null;

  return (
    <div className="sticky top-0 z-50 flex items-center justify-center gap-3 border-b border-brand-clay/20 bg-brand-clay-light/80 px-4 py-2.5 text-sm text-[#92400E] backdrop-blur-xl">
      <p className="font-medium">
        You&apos;re exploring honeyDue in demo mode. Changes aren&apos;t saved.
      </p>
      <Button size="xs" className="rounded-full" asChild>
        <Link href="/register">Sign Up Free</Link>
      </Button>
      <Button
        variant="ghost"
        size="icon-xs"
        className="absolute right-2 text-[#92400E] hover:bg-brand-clay/10"
        onClick={() => setDismissed(true)}
        aria-label="Dismiss banner"
      >
        <X />
      </Button>
    </div>
  );
}
