'use client';

import { useState } from 'react';
import { X } from 'lucide-react';

/* ── Marquee text duplicated for seamless loop ────────────── */
const MARQUEE_TEXT =
  '🔥 Flat 20% Discount on your first order! Use code: XEVON10 | Free delivery on orders above ৳1,500 | Cash on Delivery available nationwide!';

export default function AnnouncementBar() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="relative z-50 bg-brand py-2 text-sm font-medium text-white">
      {/* Scrolling marquee container – overflow hidden clips the duplicate */}
      <div className="mx-auto max-w-7xl overflow-hidden">
        <div className="animate-marquee whitespace-nowrap">
          <span className="mr-8 inline-block">{MARQUEE_TEXT}</span>
          <span className="mr-8 inline-block">{MARQUEE_TEXT}</span>
        </div>
      </div>

      {/* Close button */}
      <button
        onClick={() => setVisible(false)}
        aria-label="Close announcement"
        className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 transition-colors hover:bg-white/20"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  );
}
