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

export const ProductCollectionListHeader = ({ search, setSearch }: { search: string | null; setSearch: (v: string | null) => void }) => {
    const { t } = useTranslation();
    const [isOpenModalCreateCollection, setIsOpenModalCreateCollection] = 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 || null)} />
                </div>
                <div className="flex items-center gap-2">
                    <button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateCollection(true)}>
                        <IconPlus />
                        {t('add_product_collection')}
                    </button>
                </div>
            </div>
            <CreateProductCollectionModal isOpen={isOpenModalCreateCollection} onClose={() => setIsOpenModalCreateCollection(false)} />
        </>
    );
};