const Opportunities = () => {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState('All');
    const [opportunities, setOpportunities] = useState(mockOpportunities);
    const tabs = ['All', 'Jobs', 'Internships', 'Freelance', 'Volunteer', 'Collaboration'];

    const toggleSave = (id) => {
        setOpportunities(opportunities.map(o => o.id === id ? { ...o, isSaved: !o.isSaved } : o));
    };

    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">Opportunities</h1>
                    <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">Find jobs, projects, and collaborations that match your skills</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">Post Opportunity</span>
                        <span className="sm:hidden">Post</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 opportunities by title, company, or keyword..." 
                    icon={<i data-lucide="search" className="w-5 h-5"></i>}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="flex-1"
                />
                <div className="flex gap-2">
                    <Input 
                        placeholder="Location" 
                        icon={<i data-lucide="map-pin" className="w-5 h-5"></i>}
                        className="w-full md:w-48"
                    />
                    <Button variant="outline" className="px-4" icon={<i data-lucide="sliders" className="w-5 h-5" />}>
                        <span className="hidden md:inline">Filters</span>
                    </Button>
                </div>
            </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">
                {opportunities.map(opp => (
                    <Card key={opp.id} className="p-5 flex flex-col hoverable group">
                        <div className="flex justify-between items-start mb-4">
                            <Avatar src={opp.logo} alt={opp.org} size="lg" className="rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-700" />
                            <button 
                                onClick={() => toggleSave(opp.id)}
                                className={`p-2 rounded-full transition-colors ${opp.isSaved ? 'text-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}
                            >
                                <i data-lucide="bookmark" className={`w-5 h-5 ${opp.isSaved ? 'fill-current' : ''}`}></i>
                            </button>
                        </div>
                        
                        <div className="flex-1">
                            <h3 className="font-bold text-gray-900 dark:text-white text-lg group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">{opp.title}</h3>
                            <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">{opp.org}</p>
                            
                            <div className="flex flex-col gap-2 mb-4">
                                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i data-lucide="map-pin" className="w-4 h-4 mr-2 text-gray-400"></i>
                                    {opp.location}
                                </div>
                                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i data-lucide="briefcase" className="w-4 h-4 mr-2 text-gray-400"></i>
                                    {opp.type}
                                </div>
                                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i data-lucide="clock" className="w-4 h-4 mr-2 text-gray-400"></i>
                                    Posted {opp.posted} • Deadline: {opp.deadline}
                                </div>
                            </div>
                        </div>
                        
                        <div className="flex flex-wrap gap-2 mb-5">
                            <Badge variant="indigo">{opp.category}</Badge>
                            {opp.location === 'Remote' && <Badge variant="emerald">Remote</Badge>}
                        </div>
                        
                        <div className="flex gap-3 mt-auto">
                            <Button variant="primary" className="flex-1" icon={<i data-lucide="send" className="w-4 h-4"></i>}>Apply</Button>
                            <Button variant="outline" className="flex-1">View Details</Button>
                        </div>
                    </Card>
                ))}
            </div>
            
            {opportunities.length === 0 && (
                <EmptyState 
                    icon={<i data-lucide="briefcase" className="w-8 h-8"></i>}
                    title="No opportunities found"
                    description="We couldn't find any opportunities matching your criteria."
                    action={<Button variant="primary">Clear Filters</Button>}
                />
            )}
        </div>
    );
};