import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardFooter,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { index, store } from '@/routes/student/letter-requests';

export default function LetterRequestCreate() {
    return (
        <>
            <Head title="Ajukan Surat Permohonan" />

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

                <Form action={store()}>
                    {({ errors, processing }) => (
                        <Card>
                            <CardHeader>
                                <CardTitle>Detail Permohonan</CardTitle>
                            </CardHeader>
                            <CardContent className="grid gap-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="letter_type">
                                        Jenis Surat{' '}
                                        <span className="text-destructive">
                                            *
                                        </span>
                                    </Label>
                                    <Input
                                        id="letter_type"
                                        name="letter_type"
                                        placeholder="Contoh: Surat Aktif Kuliah"
                                        aria-invalid={!!errors.letter_type}
                                    />
                                    <InputError message={errors.letter_type} />
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="purpose">Keperluan</Label>
                                    <Textarea
                                        id="purpose"
                                        name="purpose"
                                        placeholder="Jelaskan keperluan surat ini"
                                    />
                                    <InputError message={errors.purpose} />
                                </div>
                            </CardContent>
                            <CardFooter className="justify-end">
                                <Button type="submit" disabled={processing}>
                                    Ajukan
                                </Button>
                            </CardFooter>
                        </Card>
                    )}
                </Form>
            </div>
        </>
    );
}
