export default function TopCreators({ creators, navigate }) {
    return (
        <div className="mt-10">
            <h2 className="text-3xl font-bold mb-4 text-white">Top Créateurs</h2>
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 mt-8">
                {creators && creators.length > 0 ? creators.map((creator, index) => (
                    <div 
                        key={creator.id || index} 
                        className="flex flex-col items-center glassmorphism  py-2"
                        onClick={() => navigate(`/channel/${creator.id}`)}
                    >
                        <img src={creator.profilepicture} alt={creator.name} className="w-[128px] aspect-square rounded-full" />
                        <h3 className="text-xl text-white font-bold mt-1">{creator.name}</h3>
                        <span className="text-sm text-gray-500">{creator.subscriber_count} abonné{creator.subscriber_count > 1 ? 's' : ''}</span>
                        <p className="text-center text-gray-400">
                            <span>{creator.description.slice(0, 100) + (creator.description.length > 100 ? '...' : '')}</span>
                        </p>
                    </div>
                )) : (
                    <p className="text-gray-500">Aucun créateur disponible</p>
                )}
            </div>
        </div>
    );
}