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

const SecondaryBanner = () => {
  const { secondaryBanner, dismissSecondary } = useBanners();

  if (!secondaryBanner.visible) return null;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ height: 0, opacity: 0 }}
        animate={{ height: 'auto', opacity: 1 }}
        exit={{ height: 0, opacity: 0 }}
        className="bg-[#D1FAE5] text-[#065F46] px-6 py-2.5 relative z-[999] flex items-center justify-center border-b border-[#34D399]/30"
      >
        <div className="flex items-center gap-3 text-xs font-medium">
          <Sparkles className="w-4 h-4 text-[#059669]" />
          <span>{secondaryBanner.message}</span>
        </div>
        
        {secondaryBanner.dismissible && (
          <button 
            onClick={dismissSecondary}
            className="absolute right-4 top-1/2 -translate-y-1/2 p-1 hover:bg-[#10B981]/20 rounded-full transition-colors"
          >
            <X className="w-3.5 h-3.5 text-[#047857]" />
          </button>
        )}
      </motion.div>
    </AnimatePresence>
  );
};

export default SecondaryBanner;
