"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { FilterIcon, X } from "lucide-react";
import { Dispatch, SetStateAction } from "react";
import { useTranslation } from "react-i18next";

export default function NewsFilter({ filter, setFilter, setSearch, search }: {
    filter: boolean,
    setFilter: Dispatch<SetStateAction<boolean>>,
    setSearch: Dispatch<SetStateAction<string>>,
    search: string
}) {
    const { t } = useTranslation();
    return (
        <div className={cn("transition-all border rounded-md",
            filter ? "w-full lg:w-4/12 opacity-100" : "w-0 opacity-0 h-0"
        )}>
            <div className="bg-primary-tw w-full rounded-t-md flex justify-between items-center p-2 transition-all">
                <div className="flex gap-2 items-center text-white">
                    <span>
                        <FilterIcon size={20} color="white" fill="white" />
                    </span>
                    <span>
                        {t('training-courses.filter')}
                    </span>
                </div>
                <button
                    className="mx-2 closeIcon"
                    title="Close"
                    onClick={() => setFilter(false)}
                >
                    <X size={17} color="white" />
                </button>
            </div>
            <div className='my-4 px-2 space-y-2 relative'>
                <Label htmlFor='name'>{t('news.name')}</Label>
                <Input
                    id='name'
                    placeholder={t('news.placeholder')}
                    className='focus:ring-secondary-tw focus:border-secondary-tw'
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
                <Button
                    variant="outline"
                    className={cn("bg-secondary-tw text-white absolute end-2 w-9 transition-all",
                        search ? "opacity-100 top-6" : "opacity-0 top-5"
                    )}
                    onClick={() => setSearch("")}
                >
                    <X />
                </Button>
            </div>
        </div>
    )
}