import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head } from "@inertiajs/react";
import { WrenchScrewdriverIcon } from "@heroicons/react/24/outline";

export default function ComingSoon({ title }) {
    return (
        <AuthenticatedLayout
            header={
                <h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-white">
                    Perpustakaan Online
                </h2>
            }
        >
            <Head title={title} />

            <div className="rounded-2xl border border-gray-200 dark:border-purple-500/20 bg-white dark:bg-dark-300 px-6 py-16 text-center shadow-sm">
                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-purple-100 dark:bg-purple-600/20">
                    <WrenchScrewdriverIcon className="h-8 w-8 text-purple-600 dark:text-purple-300" />
                </div>
                <h3 className="mt-6 text-lg font-semibold text-gray-900 dark:text-white">
                    {title}
                </h3>
                <p className="mt-2 text-sm text-gray-600 dark:text-purple-200/80 max-w-md mx-auto">
                    Modul ini sedang dalam pengembangan. Fitur akan tersedia pada
                    pembaruan berikutnya.
                </p>
            </div>
        </AuthenticatedLayout>
    );
}
