import { Head } from '@inertiajs/react';

import AppLayout from '@/layouts/app-layout';
import membersRoutes from '@/routes/members';
import type { BreadcrumbItem, MemberShowProps } from '@/types';

import FinancialAccounts from './Components/FinancialAccounts';
import ShowHeader from './Components/ShowHeader';
import MemberDetail from './MemberDetail';
import RecentActivity from './RecentActivity';

export type { MemberShowProps as PageProps };

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Anggota',
        href: membersRoutes.index().url,
    },
    {
        title: 'Detail Anggota',
        href: '#',
    },
];

export default function Show({
    member,
    summary,
    savings_accounts,
    financings,
}: MemberShowProps) {
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`Detail: ${member.name}`} />

            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                {/* Header */}
                <ShowHeader
                    member={member}
                    summary={summary}
                    savingsAccounts={savings_accounts}
                />

                <FinancialAccounts
                    savings={savings_accounts}
                    financings={financings}
                    member={member}
                />

                {/* Member Details */}
                <MemberDetail member={member} />

                {/* Recent Activity - Placeholder for future implementation */}
                <RecentActivity />
            </div>
        </AppLayout>
    );
}
