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

export const ProductColourListHeader = ({ search, setSearch }: { search: string | null; setSearch: (v: string | null) => void }) => {
    const { t } = useTranslation();
    const [isOpenModalCreateColour, setIsOpenModalCreateColour] = 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={() => setIsOpenModalCreateColour(true)}>
                        <IconPlus />
                        {t('add_product_colour')}
                    </button>
                </div>
            </div>
            <CreateProductColourModal isOpen={isOpenModalCreateColour} onClose={() => setIsOpenModalCreateColour(false)} />
        </>
    );
};
