import type { ReactNode } from 'react';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet';
import './SandboxEntryDialog.css';

type SandboxSampleSheetProps = {
    title: string;
    description: string;
    points: ReactNode[];
    action: string;
    pending: boolean;
    error: string | null;
    onConfirm: () => void;
    onClose: () => void;
};

// admin-v2 Repopulate and Restore confirmations: the shared sheet, shared-impact warning first.
const SandboxSampleSheet = ({ title, description, points, action, pending, error, onConfirm, onClose }: SandboxSampleSheetProps) => (
    <Sheet open onOpenChange={(open) => !open && !pending && onClose()}>
        <SheetContent
            className="ak-panel gap-0 sm:max-w-none"
            showCloseButton={!pending}
            onEscapeKeyDown={(event) => pending && event.preventDefault()}
            onInteractOutside={(event) => pending && event.preventDefault()}
        >
            <SheetHeader className="ak-overlay__header">
                <SheetTitle>{title}</SheetTitle>
                <SheetDescription className="ak-overlay__description">{description}</SheetDescription>
            </SheetHeader>
            <div className="ak-overlay__body flex-1">
                <ul className="sandbox-entry__points">
                    {points.map((point, index) => <li key={index}>{point}</li>)}
                </ul>
                {error && <p role="alert" className="ak-field-error">{error}</p>}
            </div>
            <div className="ak-overlay__footer">
                <button type="button" onClick={onConfirm} disabled={pending} className="btn btn-red">
                    {action}
                </button>
            </div>
        </SheetContent>
    </Sheet>
);

export default SandboxSampleSheet;