"use client"

import * as React from "react"
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
import type { CustomerBackend } from "@/api/rtk/customers-api"
import { CustomerDetailView } from "./customer-detail-view"

export interface CustomerDetailModalProps {
    customerId: string | null
    isOpen: boolean
    onClose: () => void
    onEdit?: (customer: CustomerBackend) => void
}

export function CustomerDetailModal({
    customerId,
    isOpen,
    onClose,
    onEdit,
}: CustomerDetailModalProps) {
    if (!isOpen || !customerId) return null

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-[900px] w-[96vw] max-h-[95vh] p-0 overflow-hidden flex flex-col">
                <DialogTitle className="sr-only">Customer details</DialogTitle>
                <CustomerDetailView
                    customerId={customerId}
                    fetchEnabled={isOpen}
                    variant="modal"
                    onEdit={onEdit}
                />
            </DialogContent>
        </Dialog>
    )
}