import type { Metadata } from "next";

import Link from "next/link";

import { Suspense } from "react";

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

import { CiteThis } from "@/components/cite-this";

import { VotesBrowser } from "@/components/votes-browser";

export const metadata: Metadata = {

  title: "Votes",

  description:

    "Recorded roll-call votes of the U.S. House and Senate. Filter by chamber or keyword. Every vote links to its official record.",

};

export const revalidate = 300;

export default function VotesPage() {

  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)",

      }}

    >

      {}

      <nav aria-label="Breadcrumb" className="mb-10">

        <ol className="flex flex-wrap items-center gap-2" style={{ marginBottom: "12px" }}>

          <li>

            <Link

              href="/"

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

              style={{ color: "var(--dk-signal)", fontSize: "12px", letterSpacing: "0.12em" }}

            >

              Home

            </Link>

          </li>

          <li aria-hidden="true" className="label" style={{ color: "var(--dk-ash-2)", fontSize: "12px" }}>

            /

          </li>

          <li

            className="label"

            style={{ color: "var(--dk-ash)", fontSize: "12px", letterSpacing: "0.12em" }}

            aria-current="page"

          >

            Votes

          </li>

        </ol>

        <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)",

          }}

        >

          ← Back to home

        </Link>

      </nav>

      <PageHeader

        eyebrow="Roll-call register"

        title="Votes, on the record"

        lead="Each row is a recorded vote in the House or Senate -what it was about, the tally, and a link to the official roll call. Open any vote to see how every member voted."

      />

      <Suspense fallback={<VotesSkeleton />}>

        <VotesBrowser />

      </Suspense>

      {}

      <div

        style={{

          marginTop: "clamp(40px, 7vw, 72px)",

          borderTop: "1px solid var(--dk-line)",

          paddingTop: "clamp(24px, 4vw, 40px)",

        }}

      >

        <p className="label mb-8" style={{ color: "var(--dk-ash-2)" }}>

          Roll-call votes from clerk.house.gov and senate.gov XML feeds. Order is

          by date -no editorial weighting.

        </p>

        <p className="label mb-4" style={{ color: "var(--dk-ash)" }}>

          Cite this page

        </p>

        <CiteThis

          kind="page"

          title="Votes -Roll-call register"

          permalink="https://usdocket.org/votes"

          sourceUrl="https://clerk.house.gov/evs/ https://www.senate.gov/legislative/votes_new.htm"

        />

      </div>

    </div>

  );

}

function VotesSkeleton() {

  return (

    <div className="mt-8">

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

      <div className="mt-8 mb-4 h-4 w-40 animate-pulse rounded-sm bg-graphite" />

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

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

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

        ))}

      </div>

    </div>

  );

}