import { type FC, useState } from 'react'
import DefaulModal from './DefaulModal'
import { useTranslation } from 'react-i18next'
import Button from './Button'
import Textarea from './Textarea'

type Props = {
    isloading?: boolean,
    close: () => void,
    isOpen: boolean,
    onConfrim: (text?: string) => void,
    label?: string,
    isHasDescription?: boolean
}

const ModalConfrim: FC<Props> = (props: Props) => {

    const { t } = useTranslation('global')
    const [description, setDescription] = useState<string>('')

    return (
        <DefaulModal
            open={props.isOpen}
            close={props.close}
            title_header={'حذف'}
            isHeader
        >
            <div className='mt-6'>
                <div className='text-sm text-center'>
                    {
                        props.label ?
                            props.label
                            :
                            'برای حذف این آیتم مطمئن هستید؟'
                    }

                    {
                        props.isHasDescription &&
                        <div className='mt-4'>
                            <Textarea
                                placeholder={t('description')}
                                onChange={(e) => setDescription(e.target.value)}
                                value={description}
                                className='bg-transparent border border-gray-500 rounded-xl w-[300px] p-2'
                            />
                        </div>
                    }
                </div>

                <div className='flex gap-4 justify-center mt-10'>
                    <Button
                        className='w-full'
                        onClick={() => props.onConfrim(props.isHasDescription ? description : undefined)}
                        disabled={props.isloading}
                    >
                        بله
                    </Button>
                    <Button
                        className='bg-transparent w-full hover:bg-gray-100 text-black border border-primary'
                        onClick={props.close}
                    >
                        لغو
                    </Button>
                </div>
            </div>
        </DefaulModal>
    )
}

export default ModalConfrim