import Link from "next/link";
import { readMeta, listGroups } from "@/lib/store";
import BrowseClient from "./BrowseClient";

export default async function BrowsePage() {
  const [allRecords, groups] = await Promise.all([readMeta(), listGroups()]);

  return (
    <div className="mx-auto max-w-5xl px-6 py-16">
      {/* Header */}
      <div className="mb-10 flex flex-wrap items-end justify-between gap-4">
        <div>
          <p className="text-xs font-semibold uppercase tracking-widest text-cyan-400 mb-2">
            Community
          </p>
          <h1 className="text-4xl font-extrabold tracking-tight text-white">
            Browse shared files
          </h1>
          <p className="mt-2 text-slate-400">
            Docker configs and backups shared by the community. Find, inspect, and restore in
            seconds.
          </p>
        </div>
        <Link
          href="/share"
          className="rounded-xl px-6 py-2.5 text-sm font-bold text-slate-900 transition-all hover:brightness-110 hover:scale-105 active:scale-95 shrink-0"
          style={{ background: "linear-gradient(135deg, #22d3ee, #06b6d4)" }}
        >
          + Share a file
        </Link>
      </div>

      {/* Client section: search + filter + cards */}
      <BrowseClient records={allRecords} groups={groups} />
    </div>
  );
}