const Projects = () => {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState('All');
    
    const tabs = ['All', 'My Projects', 'Active', 'Planning', 'Completed'];

    const getStatusColor = (status) => {
        switch (status) {
            case 'Active': return 'emerald';
            case 'Planning': return 'blue';
            case 'Completed': return 'purple';
            default: return 'gray';
        }
    };

    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">Projects</h1>
                    <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">Collaborate on side projects, startups, and open source</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">New Project</span>
                        <span className="sm:hidden">New</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 projects..." 
                    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 gap-6">
                {mockProjects.map(project => (
                    <Card key={project.id} className="p-5 flex flex-col hoverable group">
                        <div className="flex justify-between items-start mb-4">
                            <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">{project.name}</h3>
                                <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Led by {project.creator}</p>
                            </div>
                            <Badge variant={getStatusColor(project.status)}>{project.status}</Badge>
                        </div>
                        
                        <p className="text-sm text-gray-600 dark:text-gray-300 mb-6 flex-1">{project.description}</p>
                        
                        <div className="mb-4">
                            <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1 font-medium">
                                <span>Progress</span>
                                <span>{project.progress}%</span>
                            </div>
                            <div className="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
                                <div className="bg-primary-500 h-2 rounded-full" style={{ width: `${project.progress}%` }}></div>
                            </div>
                        </div>

                        <div className="flex flex-col gap-2 mb-6 pt-4 border-t border-gray-100 dark:border-gray-800">
                            <p className="text-xs font-semibold text-gray-900 dark:text-white uppercase tracking-wider mb-1">Looking For:</p>
                            <div className="flex flex-wrap gap-2">
                                {project.lookingFor.map(role => (
                                    <Badge key={role} variant="gray" className="border border-gray-200 dark:border-gray-700">{role}</Badge>
                                ))}
                            </div>
                        </div>
                        
                        <div className="flex items-center justify-between mt-auto">
                            <span className="text-xs text-gray-400 dark:text-gray-500 flex items-center">
                                <i data-lucide="clock" className="w-3 h-3 mr-1"></i> Updated {project.updated}
                            </span>
                            <div className="flex gap-2">
                                <Button variant="outline" size="sm" icon={<i data-lucide="message-square" className="w-4 h-4"></i>}>Message</Button>
                                <Button variant="primary" size="sm">View Details</Button>
                            </div>
                        </div>
                    </Card>
                ))}
            </div>
        </div>
    );
};