import React from 'react';
import { ViewMode } from './ViewDisplayControl';
import { GenerationRecord } from '@/types';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { MediaManager, MediaManagerProps } from './MediaManager';

export interface MediaDialogProps extends MediaManagerProps {
    title: string;
    open: boolean;
    onClose: () => void;
}

export function MediaDialog({
    title,
    open,
    onClose,
    ...managerProps
}: MediaDialogProps) {
    return (
        <Dialog open={open} onOpenChange={(val) => !val && onClose()}>
            <DialogContent className="max-w-6xl h-[85vh] flex flex-col p-0 gap-0 bg-background border-border">
                <DialogHeader className="px-6 py-4 border-b border-border">
                    <div className="flex items-center justify-between">
                        <DialogTitle className="text-xl font-bold text-foreground">{title}</DialogTitle>
                    </div>
                </DialogHeader>

                <MediaManager 
                    {...managerProps}
                    className="flex-1"
                />
            </DialogContent>
        </Dialog>
    );
}
