import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { PANEL_SETTING } from "@/config/panelSetting";

interface TicketFiltersProps {
    searchTerm: string;
    setSearchTerm: (v: string) => void;
    checkedFilter: string | null;
    setCheckedFilter: (v: string | null) => void;
    hasProductsFilter: string | null;
    setHasProductsFilter: (v: string | null) => void;
}

export default function TicketFilters({
    searchTerm,
    setSearchTerm,
    checkedFilter,
    setCheckedFilter,
    hasProductsFilter,
    setHasProductsFilter,
}: TicketFiltersProps) {
    return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
                <Label htmlFor="search">جستجو</Label>
                <Input
                    id="search"
                    placeholder="جستجو بر اساس محتوا یا کاربر..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                />
            </div>
            <div className="space-y-2">
                <Label htmlFor="checked-status">وضعیت</Label>
                <Select
                    value={checkedFilter === null ? "all" : checkedFilter}
                    onValueChange={(value) => setCheckedFilter(value === "all" ? null : value)}
                >
                    <SelectTrigger id="checked-status">
                        <SelectValue placeholder="همه وضعیت‌ها" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="all">همه وضعیت‌ها</SelectItem>
                        <SelectItem value="true">بررسی شده</SelectItem>
                        <SelectItem value="false">بررسی نشده</SelectItem>
                    </SelectContent>
                </Select>
            </div>
            {PANEL_SETTING.template === "prop_firms" && (
                <div className="space-y-2">
                    <Label htmlFor="has-products">دارای محصول</Label>
                    <Select
                        value={hasProductsFilter === null ? "all" : hasProductsFilter}
                        onValueChange={(value) => setHasProductsFilter(value === "all" ? null : value)}
                    >
                        <SelectTrigger id="has-products">
                            <SelectValue placeholder="همه کاربران" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="all">همه وضعیت‌ها</SelectItem>
                            <SelectItem value="true">محصول دارد</SelectItem>
                            <SelectItem value="false">محصول ندارد</SelectItem>
                        </SelectContent>
                    </Select>
                </div>
            )
            }
        </div>
    );
}