import { Head } from "@inertiajs/react";

interface HomeProps {
  auth: Record<string, unknown>;
  hotelName: string;
}

export default function Home({ hotelName }: HomeProps) {
  return (
    <>
      <Head title="Home" />
      <div className="col-span-12">
        <div className="rounded-xl bg-white p-8 text-center shadow-sm dark:bg-gray-900">
          <h1
            className="mb-4 text-4xl font-bold"
            style={{ color: "var(--color-text)" }}
          >
            Welkom bij {hotelName}
          </h1>
          <p
            className="text-lg"
            style={{ color: "var(--color-text-muted)" }}
          >
            Dit is een Inertia.js pagina — zelfde layout, zelfde Tailwind,
            zelfde stijlen.
          </p>
          <div className="mt-8 flex justify-center gap-4">
            <a
              href="/"
              className="rounded-xl px-6 py-3 font-semibold transition-all duration-200 hover:scale-105"
              style={{
                backgroundColor: "var(--color-primary)",
                color: "var(--button-text-color)",
              }}
            >
              Naar huis
            </a>
          </div>
        </div>
      </div>
    </>
  );
}
