const Activities = () => {
    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <h1 className="text-2xl font-bold text-gray-900">Events & Activities</h1>
                <Button variant="primary" icon={<i data-lucide="plus" className="w-4 h-4" />}>Create Event</Button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {mockEvents.map(event => (
                    <Card key={event.id} className="flex flex-col">
                        <div className="h-40 bg-gray-200 relative">
                            <img src={event.image} alt={event.title} className="w-full h-full object-cover" />
                            <div className="absolute top-3 right-3">
                                <Badge variant="white" className="bg-white/90 backdrop-blur-sm text-gray-900 font-semibold shadow-sm">{event.category}</Badge>
                            </div>
                        </div>
                        <div className="p-5 flex-1 flex flex-col">
                            <div className="flex gap-4 mb-3">
                                <div className="text-center">
                                    <div className="text-xs font-bold text-indigo-600 uppercase">{event.date.split(' ')[0]}</div>
                                    <div className="text-xl font-black text-gray-900">{event.date.split(' ')[1].replace(',', '')}</div>
                                </div>
                                <div>
                                    <h3 className="font-bold text-gray-900 leading-tight">{event.title}</h3>
                                    <p className="text-sm text-gray-500 mt-1 flex items-center">
                                        <i data-lucide="clock" className="w-3.5 h-3.5 mr-1"></i> {event.time}
                                    </p>
                                </div>
                            </div>
                            <div className="mt-auto pt-4 flex items-center justify-between">
                                <div className="flex -space-x-2">
                                    {[1,2,3].map(i => (
                                        <img key={i} src={`https://i.pravatar.cc/150?img=${i+10}`} className="w-8 h-8 rounded-full border-2 border-white" alt="Attendee" />
                                    ))}
                                    <div className="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">
                                        +{event.attendees - 3}
                                    </div>
                                </div>
                                <Button variant="primary" className="py-1.5 px-4 text-sm">Register</Button>
                            </div>
                        </div>
                    </Card>
                ))}
            </div>
        </div>
    );
};