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

const NotificationBar = () => {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  return (
    <div className="bg-gradient-to-r from-[#8F663D] to-[#8F663D] text-white py-2 px-4 relative">
      <div className="container mx-auto flex items-center justify-between gap-4">
        <div className="flex-1 text-center">
          <span className="font-medium text-sm">
            🎉 NO HIDDEN FEES! NO RIGOROUS FEES! NO PAYOUT DELAYS!
          </span>
        </div>
        <div className="flex items-center gap-3">
          <Link 
            href="/register"
            className="bg-white/20 rounded-sm text-white hover:bg-white/30 border-0 font-medium px-4 py-1 h-8"
          >
            Start Now
          </Link>
          <button
            onClick={() => setIsVisible(false)}
            className="text-white/80 hover:text-white transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default NotificationBar;
