import { Head, Link } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
import { create } from '@/routes/student/letter-requests';
import type { LetterRequest } from '@/types/letter-request';
import { letterRequestColumns } from './columns';

type Props = {
    letterRequests: LetterRequest[];
};

export default function LetterRequestIndex({ letterRequests }: Props) {
    return (
        <>
            <Head title="Surat Permohonan" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <PageHeader
                    title="Surat Permohonan"
                    actions={
                        <Button asChild>
                            <Link href={create.url()}>
                                <Plus className="h-4 w-4" />
                                Ajukan Surat
                            </Link>
                        </Button>
                    }
                />

                <DataTable
                    columns={letterRequestColumns}
                    data={letterRequests}
                    emptyText="Anda belum pernah mengajukan surat permohonan."
                />
            </div>
        </>
    );
}
