SearchInput

"use client";

import { useState } from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  SearchInput,
  Badge
} from "@pimolu/react";

const docEntries = [
  {
    title: "Installation",
    section: "Getting started",
    excerpt: "Install the workspace, build the generated tokens and start the playground.",
  },
  {
    title: "Theme builder",
    section: "Design system",
    excerpt: "Try a preset, a colour mode, a brand colour, a radius and a density.",
  },
  {
    title: "SearchInput",
    section: "Forms",
    excerpt: "A search field with a keyboard hint, a clear action and Enter to submit.",
  },
  {
    title: "CodeBlock",
    section: "Typography",
    excerpt: "Documentation samples with line numbers, highlights and copy feedback.",
  },
  {
    title: "Design tokens",
    section: "Design system",
    excerpt: "Primitive colours, spacing and radii feeding the semantic theme aliases.",
  },
];

function DocumentationSearch() {
  const [query, setQuery] = useState("");
  const [submitted, setSubmitted] = useState<string | null>(null);
  const normalized = query.trim().toLowerCase();
  const results = normalized
    ? docEntries.filter((entry) => `${entry.title} ${entry.section} ${entry.excerpt}`
      .toLowerCase()
      .includes(normalized))
    : docEntries;
  return (
    <Card>
      <CardHeader>
        <CardTitle>Search the documentation</CardTitle>
        <CardDescription>
          Results filter as you type. Enter records the query; Escape
          clears the field.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid gap-5 min-w-0">
          <SearchInput
            label="Search the documentation"
            placeholder="Search components, tokens, guides…"
            shortcut="/"
            value={query}
            onValueChange={(nextValue: string) => {
              setQuery(nextValue);
              if(!nextValue)
                setSubmitted(null);
            }}
            onSearch={(nextValue: string) => setSubmitted(nextValue)}
          />
          <div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
            <span className="text-sm text-muted leading-relaxed">
              {results.length} result
              {results.length === 1 ? "" : "s"}
            </span>
            {
              submitted !== null && (<Badge
                variant="primary"
                appearance="soft"
                size="sm"
              >
                Searched: {submitted || "everything"}
              </Badge>)
            }
          </div>
          <div className="grid gap-5 min-w-0">
            {
              results.map((entry) => (<Card key={entry.title} size="sm">
                <CardContent>
                  <div
                    className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
                  >
                    <strong>{entry.title}</strong>
                    <Badge variant="neutral" appearance="soft" size="sm">
                      {entry.section}
                    </Badge>
                  </div>
                  <p className="text-sm text-muted leading-relaxed">
                    {entry.excerpt}
                  </p>
                </CardContent>
              </Card>))
            }
            {
              results.length === 0 && (<p
                className="text-sm text-muted leading-relaxed"
              >
                No page matches “{query}”. Try a component name
                or a token.
              </p>)
            }
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function DemoExample() {
  return (<DocumentationSearch />);
}