"use client";

import { useState, useMemo } from "react";

const ALL = [
  { name: "Editorial Hero",          tag: "hero · editorial" },
  { name: "Bubble Hero",             tag: "hero · soft-mono" },
  { name: "Magazine Hero",           tag: "hero · editorial" },
  { name: "Pricing Card",            tag: "pricing · editorial" },
  { name: "Testimonial Carousel",    tag: "testimonials · soft-mono" },
];

export function SearchWithResults() {
  const [q, setQ] = useState("");
  const results = useMemo(
    () =>
      ALL.filter((c) => c.name.toLowerCase().includes(q.toLowerCase())).slice(0, 4),
    [q]
  );

  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center min-h-[300px]">
      <div className="w-full max-w-sm">
        <div className="flex items-center gap-3 px-4 py-3 border border-[#111111] bg-[#FAFAF8]">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#111111" strokeWidth="1.6">
            <circle cx="11" cy="11" r="7" />
            <path d="m21 21-4.3-4.3" />
          </svg>
          <input
            type="text"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search components, templates…"
            className="flex-1 bg-transparent border-0 outline-none text-[14px] text-[#111111] placeholder:text-[#6B6B66]"
          />
          <kbd className="font-mono text-[10px] px-1.5 py-0.5 border border-[#1111111A] text-[#6B6B66]">
            ⌘K
          </kbd>
        </div>

        {q && (
          <div className="mt-2 border border-[#1111111A] bg-[#FAFAF8] divide-y divide-[#1111111A]">
            {results.length === 0 && (
              <div className="px-4 py-3 text-[13px] text-[#6B6B66]">
                No matches.
              </div>
            )}
            {results.map((r) => (
              <div
                key={r.name}
                className="flex items-center justify-between px-4 py-3 hover:bg-[#F4F3EF] cursor-pointer"
              >
                <span className="text-[14px] text-[#111111]">{r.name}</span>
                <span className="font-mono text-[10px] text-[#6B6B66] uppercase tracking-[0.1em]">
                  {r.tag}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
Search with Results
