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

const BERKAS_LABELS: Record<string, string> = {
    berkas_ktp: 'KTP',
    berkas_npwp: 'NPWP',
    berkas_cv: 'CV',
    berkas_bnsp: 'BNSP',
    berkas_materi: 'Materi',
    berkas_cover_rekening: 'Cover Rekening',
    berkas_foto: 'Foto Diri (untuk Flyer Acara)',
    berkas_pendukung: 'Berkas Pendukung',
};

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

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

    return (
        <DetailModal isOpen={!!id} onOpenChange={(open) => !open && onClose()} title={data ? `Narasumber - ${data.nama}` : 'Narasumber'}>
            {data && (
                <>
                    <DetailRow label="Nama" value={data.nama} />
                    <DetailRow label="Keahlian" value={data.keahlian} />
                    <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} />
                    {Object.entries(BERKAS_LABELS).map(([key, label]) => (
                        <DetailRow
                            key={key}
                            label={label}
                            value={data[key] ? <FilePreview url={data[key]} size={72} /> : <span className="italic text-gray-400">Belum diisi</span>}
                        />
                    ))}
                </>
            )}
        </DetailModal>
    );
}