'use client';

import { BlurredOverlayContainerProps } from '@/components/overlays/BlurredOverlayContainer'
import Modal from '@/components/utils/Modal'
import React from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../button/PrimaryButton';

export type PromptProps = {
    title?: string,
    description?: string,
    textConfirm?: string,
    textCancel?: string,
    onConfirm: React.MouseEventHandler | undefined,
    onCancel: React.MouseEventHandler | undefined,
    children?: React.ReactNode | null
} & Omit<BlurredOverlayContainerProps, 'children'>

function Prompt({ title, description, textConfirm, textCancel, onConfirm, onCancel, visible, onClick, children = null, ...rest }: PromptProps) {
    const { t } = useTranslation('common', {
        keyPrefix: 'DefaultPrompt'
    });

    return (
        <Modal
            visible={visible}
            onClick={onClick}
            {...rest}
        >
            <h2 className="text-base font-medium">
                {title ?? t('Heading')}
            </h2>
            <p className="text-xs font-medium mt-6">
                {description ?? t('Description')}
            </p>
            {children}
            <div className="grid grid-cols-2 gap-5.5 mt-8">
                <Button onClick={onConfirm} className="rounded-normal text-sm h-11 font-normal cursor-pointer">
                    {textConfirm ?? t('ButtonOk')}
                </Button>
                <Button onClick={onCancel} className="rounded-normal bg-disabled! h-11 cursor-pointer text-disabled2! dark:text-disabled-text! active:brightness-95 hover:brightness-105 text-sm font-normal">
                    {textCancel ?? t('ButtonCancel')}
                </Button>
            </div>
        </Modal>
    )
}

export default Prompt