import { 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,
    title?: string
}

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={props.title ? props.title : t('confrim.subject')}
            isHeader
        >
            <div className='mt-6'>
                <div className='text-sm text-center'>
                    {
                        props.label ?
                            props.label
                            :
                            t('confrim.content')
                    }

                    {
                        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'
                                label=''
                            />
                        </div>
                    }
                </div>

                <div className='flex gap-4 justify-center mt-10'>
                    <Button
                        label={t('confrim.yes')}
                        onClick={() => props.onConfrim(props.isHasDescription ? description : undefined)}
                        loading={props.isLoading}
                    />
                    <Button
                        label={t('confrim.cancel')}
                        className='bg-transparent text-black border border-primary'
                        onClick={props.close}
                    />
                </div>
            </div>
        </DefaulModal>
    )
}

export default ModalConfrim