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

import { auth } from "@/auth";

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 async function Home() {
  const session = await auth();

  return (
    <section className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-normal">대시보드</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          {session?.user.name} 관리자 계정으로 로그인했습니다.
        </p>
      </div>

      <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>
  );
}