import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/react';
import { Building2, Database, GraduationCap, ShieldCheck } from 'lucide-react';

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashboard', href: '/dashboard' },
];

const modules = [
    {
        title: 'Institutions',
        description: 'Institution onboarding, due diligence and tenant administration.',
        icon: Building2,
    },
    {
        title: 'Qualifications',
        description: 'Qualification catalogue, programme mapping and version control.',
        icon: GraduationCap,
    },
    {
        title: 'Learner Achievements',
        description: 'Secure learner achievement records, imports and data-quality workflows.',
        icon: Database,
    },
    {
        title: 'Verification Exchange',
        description: 'Verification requests, matching, institutional review and responses.',
        icon: ShieldCheck,
    },
];

export default function Dashboard() {
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Dashboard" />

            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <div>
                    <p className="text-muted-foreground text-sm font-medium">QVX FOUNDATION</p>
                    <h1 className="mt-1 text-2xl font-semibold tracking-tight">Qualification Verification Exchange</h1>
                    <p className="text-muted-foreground mt-2 max-w-3xl text-sm">
                        This clean Laravel foundation is ready for phased QVX development.
                    </p>
                </div>

                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                    {modules.map(({ title, description, icon: Icon }) => (
                        <div key={title} className="border-border bg-card rounded-xl border p-5">
                            <Icon className="text-muted-foreground size-5" />
                            <h2 className="mt-4 font-semibold">{title}</h2>
                            <p className="text-muted-foreground mt-2 text-sm leading-6">{description}</p>
                            <p className="text-muted-foreground mt-4 text-xs font-medium uppercase tracking-wide">Planned module</p>
                        </div>
                    ))}
                </div>
            </div>
        </AppLayout>
    );
}
