import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Character } from '@/pages/frontend/ingame/types';
import { CharacterSelect } from './CharacterSelect';

interface ServiceDialogProps {
    isOpen: boolean;
    onClose: () => void;
    title: string;
    description: React.ReactNode;
    characters: Character[];
    selectedCharacter: string;
    onCharacterChange: (characterId: string) => void;
    onConfirm: () => void;
    processing: boolean;
    confirmText: string;
    processingText?: string;
    disabled?: boolean;
    minLevel?: number;
    children?: React.ReactNode;
}

export const ServiceDialog: React.FC<ServiceDialogProps> = ({
    isOpen,
    onClose,
    title,
    description,
    characters,
    selectedCharacter,
    onCharacterChange,
    onConfirm,
    processing,
    confirmText,
    processingText,
    disabled = false,
    minLevel,
    children,
}) => {
    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{title}</DialogTitle>
                    <DialogDescription>{description}</DialogDescription>
                </DialogHeader>

                <div className="space-y-4 py-4">
                    <CharacterSelect
                        characters={characters}
                        value={selectedCharacter}
                        onValueChange={onCharacterChange}
                        minLevel={minLevel}
                    />
                    {children}
                </div>

                <DialogFooter>
                    <Button variant="outline" onClick={onClose} disabled={processing}>
                        Cancel
                    </Button>
                    <Button
                        onClick={onConfirm}
                        disabled={!selectedCharacter || processing || disabled}
                    >
                        {processing ? processingText || 'Processing...' : confirmText}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};