import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '@/components/Button'
import Select from '@/components/Select'

interface EmailFormActionsProps {
    onSend: () => void
    isSending: boolean
    onClose?: () => void
    onSaveDraft?: () => void
    isSavingDraft?: boolean
    priority?: string
    onPriorityChange?: (priority: string) => void
}

const EmailFormActions: FC<EmailFormActionsProps> = ({
    onSend,
    isSending,
    onClose,
    onSaveDraft,
    isSavingDraft = false,
    priority,
    onPriorityChange
}) => {
    const { t } = useTranslation('global')

    const priorityOptions = [
        { value: 'high', label: 'بالا' },
        { value: 'medium', label: 'متوسط' },
        { value: 'low', label: 'پایین' },
    ]

    return (
        <div className='flex flex-col gap-4 sm:flex-row pt-4'>
            {/* Priority Selector */}
            {priority !== undefined && onPriorityChange && (
                <div>
                    <Select
                        items={priorityOptions}
                        placeholder={t('new_message.select_priority')}
                        className='xl:w-[190px] min-w-[130px]'
                        value={priority}
                        onChange={(e) => onPriorityChange(e.target.value)}
                    />
                </div>
            )}

            <div className='flex-1 justify-end flex gap-3'>
                {/* Save Draft Button */}
                {onSaveDraft && (
                    <Button
                        className='!w-full sm:!w-fit px-6 md:px-10 bg-white text-black border border-primary order-2 sm:order-1'
                        label={t('new_message.draft')}
                        onClick={onSaveDraft}
                        loading={isSavingDraft}
                    />
                )}

                {/* Close Button */}
                {onClose && !onSaveDraft && (
                    <Button
                        className='!w-full sm:!w-fit px-6 md:px-10 bg-white text-black border border-primary order-2 sm:order-1'
                        label={t('common.close')}
                        onClick={onClose}
                    />
                )}

                {/* Send Button */}
                <Button
                    className='w-full sm:w-fit px-6 md:px-10 order-1 sm:order-2'
                    label={t('new_message.send')}
                    onClick={onSend}
                    loading={isSending}
                />
            </div>
        </div>
    )
}

export default EmailFormActions