'use client';

import { ExternalLink, Phone, Mail } from 'lucide-react';

interface DemoBannerProps {
  isDemoMode?: boolean;
  isPublicDemo?: boolean;
}

export function DemoBanner({ isDemoMode = false, isPublicDemo = false }: DemoBannerProps) {
  if (!isDemoMode) return null;

  if (isPublicDemo) {
    return (
      <div className="bg-gradient-to-r from-purple-600 via-blue-600 to-indigo-600 text-white">
        <div className="px-4 py-3">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm font-medium">
            <div className="flex items-center gap-2">
              <span>Mode Démonstration - Découvrez l'Espace Paie Odentas</span>
            </div>
            
            <div className="flex items-center gap-4">
              <a 
                href="https://odentas.fr/contactez-nous/" 
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1 px-3 py-1 bg-white/20 hover:bg-white/30 rounded-full transition-colors"
              >
                <Mail className="w-3 h-3" />
                Contacter un expert paie du spectacle
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-yellow-500 text-black">
      <div className="px-4 py-2 text-center text-sm font-medium">
        Mode Développement - Démonstration avec données fictives
      </div>
    </div>
  );
}
