const Communities = () => {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState('All');
    const [communities, setCommunities] = useState(mockCommunities);
    const tabs = ['All', 'My Communities', 'Developers', 'Designers', 'Entrepreneurs'];

    const toggleJoin = (id) => {
        setCommunities(communities.map(c => c.id === id ? { ...c, isJoined: !c.isJoined } : c));
    };

    return (
        <div className="space-y-6 pb-8">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-2">
                <div>
                    <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Communities</h1>
                    <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">Join groups of like-minded professionals</p>
                </div>
                <div className="flex gap-2 w-full sm:w-auto">
                    <Button variant="primary" icon={<i data-lucide="plus" className="w-4 h-4"></i>}>
                        <span className="hidden sm:inline">Create Community</span>
                        <span className="sm:hidden">Create</span>
                    </Button>
                </div>
            </div>

            <div className="bg-white dark:bg-surface-dark p-4 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 mb-6 flex flex-col md:flex-row gap-4">
                <Input 
                    placeholder="Search communities by name or topic..." 
                    icon={<i data-lucide="search" className="w-5 h-5"></i>}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="flex-1"
                />
            </div>
            
            <div className="flex gap-2 border-b border-gray-200 dark:border-gray-800 mb-6 overflow-x-auto no-scrollbar pb-1">
                {tabs.map(tab => (
                    <Tab key={tab} active={activeTab === tab} onClick={() => setActiveTab(tab)}>
                        {tab}
                    </Tab>
                ))}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {communities.map(comm => (
                    <Card key={comm.id} className="flex flex-col hoverable group">
                        <div className="h-24 bg-gradient-to-r from-primary-400 to-indigo-500"></div>
                        <div className="px-5 pb-5 flex-1 flex flex-col">
                            <div className="flex justify-between items-start mb-2">
                                <Avatar src={comm.logo} alt={comm.name} size="xl" className="ring-4 ring-white dark:ring-surface-dark -mt-10 bg-white dark:bg-surface-dark" />
                                <Badge variant="indigo" className="mt-2">{comm.category}</Badge>
                            </div>
                            
                            <h3 className="font-bold text-gray-900 dark:text-white text-xl group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">{comm.name}</h3>
                            <p className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">{comm.members.toLocaleString()} members</p>
                            
                            <p className="text-sm text-gray-600 dark:text-gray-300 mb-6 flex-1 line-clamp-3">{comm.description}</p>
                            
                            <div className="flex gap-3">
                                <Button 
                                    variant={comm.isJoined ? 'outline' : 'primary'} 
                                    fullWidth
                                    onClick={() => toggleJoin(comm.id)}
                                    icon={comm.isJoined ? <i data-lucide="check" className="w-4 h-4"></i> : null}
                                >
                                    {comm.isJoined ? 'Joined' : 'Join'}
                                </Button>
                            </div>
                        </div>
                    </Card>
                ))}
            </div>
        </div>
    );
};