import { Head } from '@inertiajs/react';
import PublicLayout from '@/Layouts/PublicLayout';
import Card from '@/Components/UI/Card';

interface Certification {
    title: string;
    institute: string;
    certificate_number: string;
    issued_at: string | null;
}

export default function Public({ name, certifications }: { name: string; certifications: Certification[] }) {
    return (
        <PublicLayout>
            <Head title={`${name}'s Leadership Portfolio`} />

            <section className="mx-auto max-w-4xl px-6 py-16 lg:px-margin-page">
                <p className="text-label-caps text-accent-gold">Verified Leadership Portfolio</p>
                <h1 className="text-institutional-header mt-4 text-on-surface">{name}</h1>

                <div className="mt-10 grid gap-6 md:grid-cols-2">
                    {certifications.map((cert) => (
                        <Card key={cert.certificate_number}>
                            <p className="text-course-title text-on-surface">{cert.title}</p>
                            <p className="text-sm text-on-surface-variant">{cert.institute}</p>
                            <p className="mt-4 text-xs text-on-surface-variant">
                                Certificate No. {cert.certificate_number} · Issued {cert.issued_at}
                            </p>
                        </Card>
                    ))}
                </div>
            </section>
        </PublicLayout>
    );
}
