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

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

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

    return (
        <DetailModal
            isOpen={!!id}
            onOpenChange={(open) => !open && onClose()}
            title={data ? `Pengarah Acara (PA) - ${data.name}` : 'Informasi PA'}
        >
            {data && (
                <>
                    <DetailRow label="Nama" value={data.name} />
                    <DetailRow label="Email" value={data.email} />
                    <DetailRow label="Role" value={data.role} />
                    <DetailRow
                        label="Tarif Honor"
                        value={data.tarif_honor != null ? `Rp ${Number(data.tarif_honor).toLocaleString('id-ID')}` : '-'}
                    />
                    <DetailRow label="Status" value={data.status ?? (data.deleted_at ? 'Tidak Aktif' : 'Aktif')} />
                </>
            )}
        </DetailModal>
    );
}