import { Head, Link, usePage } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Button } from '@/components/ui/button';

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Entries', href: '/entries' }
];

interface PaginatedEntries {
    data: Array<{ id: number; form_name: string; slug: string; created_at: string }>;
}

export default function EntriesIndex() {
    const { entries } = usePage<{ entries: PaginatedEntries }>().props;

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Entries" />
            <div className="flex items-center justify-between mb-6">
                <h1 className="text-2xl font-semibold">Entries</h1>
                <Button asChild><Link href={route('entries.create')}>New Entry</Link></Button>
            </div>
            <div className="space-y-4">
                {entries.data.length === 0 && <p className="text-sm text-muted-foreground">No entries yet.</p>}
                <ul className="divide-y divide-neutral-200 dark:divide-neutral-800 border rounded-md">
                    {entries.data.map(e => (
                        <li key={e.id} className="p-4 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-900">
                            <div>
                                <p className="font-medium">{e.form_name}</p>
                                <p className="text-xs text-muted-foreground">Slug: {e.slug}</p>
                            </div>
                            <Link href={route('entries.show', e.id)} className="text-sm underline">View</Link>
                        </li>
                    ))}
                </ul>
            </div>
        </AppLayout>
    );
}
