
import React from 'react';
import { X, Info, AlertTriangle, CheckCircle } from 'lucide-react';
import { useBanners } from '@/context/BannerContext';
import { motion, AnimatePresence } from 'framer-motion';

const PriorityBanner = () => {
  const { priorityBanner, dismissPriority } = useBanners();

  if (!priorityBanner.visible) return null;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ height: 0, opacity: 0 }}
        animate={{ height: 'auto', opacity: 1 }}
        exit={{ height: 0, opacity: 0 }}
        className="bg-[#1F2937] text-white px-6 py-3 relative z-[1000] flex items-center justify-center border-b border-gray-700"
      >
        <div className="flex items-center gap-3 text-sm font-bold tracking-wide">
          <Info className="w-5 h-5 text-blue-400" />
          <span>{priorityBanner.message}</span>
        </div>
        
        {priorityBanner.dismissible && (
          <button 
            onClick={dismissPriority}
            className="absolute right-4 top-1/2 -translate-y-1/2 p-1 hover:bg-white/10 rounded-full transition-colors"
          >
            <X className="w-4 h-4 text-gray-400 hover:text-white" />
          </button>
        )}
      </motion.div>
    </AnimatePresence>
  );
};

export default PriorityBanner;
