import { useTranslation } from 'react-i18next';
import IconPlus from '../../../components/Icon/IconPlus';
import { useState } from 'react';
import { CreateProductCategoryModal } from './CreateProductCategoryModal';

export const ProductCategoryListHeader = ({ search, setSearch }: { search: string; setSearch: (v: string) => void }) => {
    const { t } = useTranslation();
    const [isOpenModalCreateCategory, setIsOpenModalCreateCategory] = useState(false);

    return (
        <>
            <div className="mb-4.5 px-5 flex md:items-center md:flex-row flex-col gap-5">
                <div className="ltr:mr-auto rtl:ml-auto">
                    <input type="text" className="form-input w-auto" placeholder={t('search')} value={search} onChange={(e) => setSearch(e.target.value)} />
                </div>
                <div className="flex items-center gap-2">
                    <button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateCategory(true)}>
                        <IconPlus />
                        {t('add_product_category')}
                    </button>
                </div>
            </div>
            <CreateProductCategoryModal isOpen={isOpenModalCreateCategory} onClose={() => setIsOpenModalCreateCategory(false)} />
        </>
    );
};
