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

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

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

    return (
        <DetailModal isOpen={!!id} onOpenChange={(open) => !open && onClose()} title={data?.perihal ?? 'Detail Surat Masuk'}>
            {data && (
                <>
                    <DetailRow label="Kode" value={data.kode} />
                    <DetailRow label="Tanggal Terima" value={formatDate(data.tanggal_terima)} />
                    <DetailRow label="Nomor Surat" value={data.nomor_surat} />
                    <DetailRow label="Pengirim" value={data.pengirim} />
                    <DetailRow label="Sifat Surat" value={data.sifat_surat} />
                    <DetailRow label="Media Diterima" value={data.media_diterima} />
                    <DetailRow label="Status Arsip" value={data.status_arsip} />
                    <DetailRow label="Data Kegiatan" value={data.kegiatan?.nama_kegiatan ?? null} />
                    <DetailRow span2 label="Perihal" value={data.perihal} />
                    <DetailRow span2 label="Catatan" value={data.catatan} />
                    <DetailRow label="Berkas" value={data.file_url ? <FilePreview url={data.file_url} size={72} /> : null} />
                </>
            )}
        </DetailModal>
    );
}