import Link from "next/link";

import { getLabSummaries } from "~/lib/labs";

export default function LabsIndex() {
  const labs = getLabSummaries();

  return (
    <main className="mx-auto w-full max-w-5xl px-6 py-10">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-[#004E78]">Open Security Labs</h1>
        <p className="mt-2 text-slate-600">Browse converted markdown and MDX lab content.</p>
      </div>

      <div className="grid gap-4">
        {labs.map((lab) => (
          <Link
            key={lab.slug}
            href={`/labs/${lab.slug}`}
            className="block rounded-lg border border-slate-200 bg-white p-6 transition hover:border-[#F89C27] hover:shadow-sm"
          >
            <h2 className="text-xl font-semibold text-[#004E78]">{lab.title}</h2>
            {lab.description ? <p className="mt-2 text-slate-600">{lab.description}</p> : null}
          </Link>
        ))}
      </div>
    </main>
  );
}
