import React from 'react';
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Search, Filter, Rss } from 'lucide-react';

export default function NewsToolbar({ 
    search, 
    setSearch, 
    statusFilter, 
    setStatusFilter,
    sourceFilter,
    setSourceFilter 
}) {
    return (
        <div className="flex flex-col md:flex-row gap-4 mb-6">
            
            {/* Search Input */}
            <div className="relative w-full md:max-w-sm">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input 
                    placeholder="Search headlines, authors..." 
                    className="pl-9 bg-background" 
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
            </div>

            <div className="flex flex-col sm:flex-row gap-2 w-full md:w-auto">
                
                {/* Status Filter */}
                <div className="flex items-center gap-2">
                    <Filter className="w-4 h-4 text-muted-foreground hidden sm:block" />
                    <Select value={statusFilter} onValueChange={setStatusFilter}>
                        <SelectTrigger className="w-full sm:w-[160px]">
                            <SelectValue placeholder="Filter Status" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">All Status</SelectItem>
                            <SelectItem value="pending">Pending</SelectItem>
                            <SelectItem value="published">Published</SelectItem>
                            <SelectItem value="rejected">Rejected</SelectItem>
                        </SelectContent>
                    </Select>
                </div>

                {/* Source Filter (New) */}
                <div className="flex items-center gap-2">
                    <Rss className="w-4 h-4 text-muted-foreground hidden sm:block" />
                    <Select value={sourceFilter} onValueChange={setSourceFilter}>
                        <SelectTrigger className="w-full sm:w-[160px]">
                            <SelectValue placeholder="Source" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">All Sources</SelectItem>
                            <SelectItem value="rss">RSS Imports</SelectItem>
                            <SelectItem value="manual">Manual Entry</SelectItem>
                        </SelectContent>
                    </Select>
                </div>

            </div>
        </div>
    );
}