import { useState, type FC } from 'react'
import { useGetIcons } from './hooks/useIconData'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add } from 'iconsax-react'
import CreateIcon from './components/CreateIcon'

const IconsList: FC = () => {

    const { t } = useTranslation('global')
    const [showModal, setShowModal] = useState<boolean>(false)
    const { refetch } = useGetIcons()

    const handleCloseModal = () => {
        setShowModal(false)
        refetch()
    }

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('icon.list_icon')}
                </div>

                <Button
                    className='w-[172px]'
                    onClick={() => setShowModal(true)}
                >
                    <div className='flex gap-2 items-center'>
                        <Add size={20} color='white' />
                        <div>
                            {t('icon.add_new_icon')}
                        </div>
                    </div>
                </Button>
            </div>

            <CreateIcon
                open={showModal}
                close={handleCloseModal}
            />
        </div>
    )
}

export default IconsList