import { DetailModal, DetailRow } from '@/Components/ui/DetailModal';
import { useAll } from '@/hooks/useResource';

interface Props {
    id: number | null;
    onClose: () => void;
}

export function KlienDetailModal({ id, onClose }: Props) {
    const { data } = useAll<any>('klien-detail', id ? `/master/klien/${id}` : '', {}, !!id);

    return (
        <DetailModal isOpen={!!id} onOpenChange={(open) => !open && onClose()} title={data ? `Data Klien - ${data.nama}` : 'Data Klien'}>
            {data && (
                <>
                    <DetailRow label="Kode" value={data.kode} />
                    <DetailRow label="Nama" value={data.nama} />
                    <DetailRow label="Instansi" value={data.instansi} />
                    <DetailRow label="Nomor HP" value={data.nomor_hp} />
                    <DetailRow label="Email" value={data.email} />
                    <DetailRow label="Status" value={data.status} />
                    <DetailRow span2 label="Catatan" value={data.catatan} />
                </>
            )}
        </DetailModal>
    );
}