import type { Metadata } from "next";

import Link from "next/link";

import { Suspense } from "react";

import { PageHeader } from "@/components/ui";

import { SearchBrowser } from "@/components/search-browser";

export const metadata: Metadata = {

  title: "Search",

  description:

    "Look up a bill, member, agency, or topic across the official record.",

};

export const revalidate = 300;

export default function SearchPage() {

  return (

    <div

      className="mx-auto w-full max-w-[860px] px-6 sm:px-8"

      style={{

        paddingTop: "clamp(32px, 6vw, 56px)",

        paddingBottom: "clamp(48px, 8vw, 80px)",

      }}

    >

      {}

      <Link

        href="/"

        className="focus-ring tap no-underline hover:underline"

        style={{

          display: "inline-flex",

          alignItems: "center",

          gap: "8px",

          fontFamily: "var(--font-mono), ui-monospace, monospace",

          fontSize: "13px",

          letterSpacing: "0.08em",

          color: "var(--dk-signal)",

          marginBottom: "32px",

        }}

      >

        ← Home

      </Link>

      <PageHeader

        eyebrow="Look it up"

        title="Search the record"

        lead="Look up a bill, a member of Congress, a state, an agency, or a topic. Every result links to its official source."

      />

      <Suspense fallback={<SearchSkeleton />}>

        <SearchBrowser />

      </Suspense>

    </div>

  );

}

function SearchSkeleton() {

  return (

    <div className="space-y-4">

      <div className="h-14 w-full animate-pulse rounded-sm bg-graphite" />

      <div className="mt-6 h-8 w-64 animate-pulse rounded-sm bg-graphite" />

      <div className="mt-6 space-y-3">

        {Array.from({ length: 8 }).map((_, i) => (

          <div key={i} className="h-12 w-full animate-pulse rounded-sm bg-graphite" />

        ))}

      </div>

    </div>

  );

}