import { Server, Database, Cloud, Globe } from 'lucide-react';

export default function DashboardServiceCard({ order, onClick }) {
    // Fonction Radar : Détecte le type de service selon son nom pour afficher la bonne icône
    const getServiceIcon = (title) => {
        const t = title.toLowerCase();
        if (t.includes('vps') || t.includes('serveur')) return <Server className="w-10 h-10 text-cyan-400" />;
        if (t.includes('cloud') || t.includes('nextcloud')) return <Cloud className="w-10 h-10 text-blue-400" />;
        if (t.includes('db') || t.includes('base') || t.includes('sql')) return <Database className="w-10 h-10 text-purple-400" />;
        return <Globe className="w-10 h-10 text-emerald-400" />; // Par défaut : Web / Hestia
    };

    // Fonction d'état : Formate le statut du service
    const getStatusBadge = (status) => {
        switch (status) {
            case 'active': return <span className="px-2 py-1 text-xs text-green-400 bg-green-400/10 border border-green-400/20 rounded">ACTIF</span>;
            case 'pending_setup': return <span className="px-2 py-1 text-xs text-orange-400 bg-orange-400/10 border border-orange-400/20 rounded">EN PRÉPARATION</span>;
            case 'suspended': return <span className="px-2 py-1 text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded">SUSPENDU</span>;
            default: return <span className="px-2 py-1 text-xs text-gray-400 bg-gray-400/10 border border-gray-400/20 rounded">{status.toUpperCase()}</span>;
        }
    };

    return (
        <div 
            className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-cyan-400/50 transition-colors group cursor-pointer flex flex-col justify-between shadow-lg"
            onClick={onClick}
        >
            <div>
                <div className="flex justify-between items-start mb-4">
                    <div className="p-3 bg-black/50 rounded-lg group-hover:scale-110 transition-transform">
                        {getServiceIcon(order.title)}
                    </div>
                    {getStatusBadge(order.status)}
                </div>
                <h3 className="text-lg font-semibold text-white truncate" title={order.title}>
                    {order.title}
                </h3>
                <p className="text-sm text-gray-500 mt-1">
                    Facturation : {order.period}
                </p>
            </div>
            
            <div className="mt-6 pt-4 border-t border-gray-800 flex justify-between items-center text-sm">
                <span className="text-gray-400">ID Réseau: #{order.id}</span>
                <span className="text-cyan-400 group-hover:underline">Gérer &gt;</span>
            </div>
        </div>
    );
}