import { Database, ShieldCheck, Table2 } from "lucide-react";

import { Button } from "@/components/ui/button";

const checks = [
  {
    label: "Next.js 16",
    value: "App Router",
    icon: ShieldCheck,
  },
  {
    label: "Prisma",
    value: "MariaDB introspected",
    icon: Database,
  },
  {
    label: "TanStack Table",
    value: "Installed",
    icon: Table2,
  },
];

export default function Home() {
  return (
    <main className="min-h-screen bg-background text-foreground">
      <section className="mx-auto flex min-h-screen w-full max-w-6xl flex-col gap-8 px-6 py-8">
        <header className="flex items-center justify-between border-b pb-5">
          <div>
            <h1 className="text-2xl font-semibold tracking-normal">
              choco-admin
            </h1>
            <p className="mt-1 text-sm text-muted-foreground">
              Phase 1 initialization
            </p>
          </div>
          <Button type="button">Ready</Button>
        </header>

        <div className="grid gap-4 md:grid-cols-3">
          {checks.map((item) => {
            const Icon = item.icon;

            return (
              <article
                className="rounded-lg border bg-card p-5 text-card-foreground"
                key={item.label}
              >
                <div className="mb-4 flex size-9 items-center justify-center rounded-md bg-muted">
                  <Icon className="size-5" aria-hidden="true" />
                </div>
                <h2 className="text-base font-medium">{item.label}</h2>
                <p className="mt-1 text-sm text-muted-foreground">
                  {item.value}
                </p>
              </article>
            );
          })}
        </div>
      </section>
    </main>
  );
}