import {
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { Head } from '@inertiajs/react';
import { Toaster } from 'sonner';

export default function ExportData() {
    const breadcrumbs = useAuthBreadcrumb();

    const handleExport = () => {
        window.open(route('sakip.export'), '_blank');
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Import Data" />
            <div className="flex h-full flex-1 flex-col gap-3 rounded-xl px-6 py-4">
                <div className="flex flex-col gap-2">
                    <span>
                        <h1 className="text-2xl font-bold uppercase">
                            Export Data
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            Halaman ini digunakan untuk mengelola data yang akan
                            di export
                        </p>
                    </span>
                </div>

                <div className="mt-4 grid auto-rows-min gap-3 md:grid-cols-3">
                    {/* Export Data Sakip */}
                    <Card className="w-full max-w-sm">
                        <CardHeader>
                            <CardTitle>SAKIP</CardTitle>
                            <CardDescription>
                                Download data sakip dengan tipe xlsx
                            </CardDescription>
                            <CardAction></CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="grid gap-2">
                                <button
                                    onClick={handleExport}
                                    className="rounded bg-green-600 px-4 py-2 text-white"
                                >
                                    Export ke Excel
                                </button>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
            <Toaster position="top-right" richColors closeButton />
        </AppLayout>
    );
}
