import React from 'react';
import { Copy } from 'lucide-react';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from '../ui/dialog';
import { Button } from '../ui/button';
import { Textarea } from '../ui/input';

const JsonSchemaModal = ({ isActive, onClose, schema }) => {
    const handleCopy = () => {
        navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
    };

    return (
        <Dialog open={isActive} onOpenChange={(o) => { if (!o) onClose(); }}>
            <DialogContent className="max-w-2xl">
                <DialogHeader>
                    <DialogTitle>JSON Schema</DialogTitle>
                </DialogHeader>
                <Textarea
                    className="h-[50vh] font-mono text-xs"
                    value={JSON.stringify(schema, null, 2)}
                    readOnly
                />
                <DialogFooter>
                    <Button variant="outline" onClick={onClose}>
                        Close
                    </Button>
                    <Button onClick={handleCopy}>
                        <Copy className="h-4 w-4" /> Copy
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default JsonSchemaModal;