"use client";

import * as React from "react";
import { ArrowRight, X } from "lucide-react";
import { cn } from "@/lib/utils";

export function AnnouncementBar({
  id = "default",
  message = "The 3D component pack just landed —",
  linkLabel = "take a look",
  href = "#",
  persist = true,
  className,
}: {
  id?: string;
  message?: string;
  linkLabel?: string;
  href?: string;
  persist?: boolean;
  className?: string;
}) {
  const storageKey = "announcement-dismissed:" + id;
  const [visible, setVisible] = React.useState(true);

  React.useEffect(() => {
    if (!persist) return;
    try {
      if (localStorage.getItem(storageKey) === "1") setVisible(false);
    } catch {
      // storage blocked — just keep it visible
    }
  }, [persist, storageKey]);

  function dismiss() {
    setVisible(false);
    if (!persist) return;
    try {
      localStorage.setItem(storageKey, "1");
    } catch {
      // ignore
    }
  }

  if (!visible) return null;

  return (
    <div
      className={cn(
        "relative w-full overflow-hidden rounded-lg border bg-card px-4 py-2.5 duration-300 animate-in fade-in slide-in-from-top-2",
        className
      )}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-60"
        style={{
          background:
            "linear-gradient(90deg, transparent, rgba(139,92,246,0.14), transparent)",
          backgroundSize: "200% 100%",
          animation: "templets-sheen 4s linear infinite",
        }}
      />

      <div className="relative flex items-center justify-center gap-2 text-sm">
        <span className="text-muted-foreground">{message}</span>
        <a href={href} className="inline-flex items-center gap-1 font-medium hover:underline">
          {linkLabel}
          <ArrowRight className="size-3.5 rtl:rotate-180" />
        </a>

        <button
          onClick={dismiss}
          aria-label="Dismiss"
          className="absolute end-0 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
        >
          <X className="size-3.5" />
        </button>
      </div>

      <style>
        {"@keyframes templets-sheen { from { background-position: 200% 0 } to { background-position: -200% 0 } }"}
      </style>
    </div>
  );
}

Related components