import { Plus } from 'lucide-react';

export default function NewServiceCard({ onClick }) {
    return (
        <div 
            onClick={onClick}
            className="bg-transparent border-2 border-dashed border-gray-700 hover:border-cyan-400 p-6 rounded-xl transition-colors cursor-pointer flex flex-col items-center justify-center text-center group min-h-50"
        >
            <div className="p-3 bg-gray-800/50 rounded-full group-hover:bg-cyan-400/20 transition-colors mb-4">
                <Plus className="w-8 h-8 text-gray-400 group-hover:text-cyan-400" />
            </div>
            <h3 className="text-lg font-semibold text-white group-hover:text-cyan-400">
                Demander une accréditation
            </h3>
            <p className="text-sm text-gray-500 mt-2">
                Déployer un nouveau serveur Web, VPS, DB ou Cloud.
            </p>
        </div>
    );
}