import { ContactDetailsPage } from '@/components/contact-details/ContactDetailsPage';
import AppLayout from '@/layouts/app-layout';
import { usePage } from '@inertiajs/react';
import { ReactNode } from 'react';

// Project globals (Ziggy / Inertia route helper)
declare const route: (...args: any[]) => string;

function Show() {
    const { contact, availableContacts } = usePage<ShowProps>().props;
    return (
        <ContactDetailsPage
            contact={contact}
            availableContacts={availableContacts}
            pageTitle="Contact Details"
            contactAbleType={'App\\Models\\Contact'}
        />
    );
}

Show.layout = (page: ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Contacts', href: route('contacts.index') },
            { title: 'Contact Details', href: '#' },
        ]}
        title="Contact Details"
    >
        {page}
    </AppLayout>
);

export default Show;