"use client";

import { Search } from "lucide-react";

const T = {
	pt: { rotulo: "Buscar no ESPDocs", dica: "Pergunte do seu jeito: chip, pino, periférico ou erro", exemplos: "Experimente:", lista: ["pino 32 esp32-s3", "usb c6", "brownout", "deep sleep"] },
	en: { rotulo: "Search ESPDocs", dica: "Ask your way: chip, pin, peripheral or error", exemplos: "Try:", lista: ["pin 32 esp32-s3", "usb pins c6", "brownout", "deep sleep"] },
	es: { rotulo: "Buscar en ESPDocs", dica: "Pregunte a su manera: chip, pin, periférico o error", exemplos: "Pruebe:", lista: ["pin 32 esp32-s3", "pines usb c6", "brownout", "deep sleep"] },
	fr: { rotulo: "Rechercher sur ESPDocs", dica: "Demandez à votre façon : puce, broche, périphérique ou erreur", exemplos: "Essayez :", lista: ["broche 32 esp32-s3", "broches usb c6", "brownout", "deep sleep"] },
	de: { rotulo: "ESPDocs durchsuchen", dica: "Fragen Sie frei: Chip, Pin, Peripherie oder Fehler", exemplos: "Probieren Sie:", lista: ["pin 32 esp32-s3", "usb pins c6", "brownout", "deep sleep"] },
	"zh-CN": { rotulo: "在 ESPDocs 中搜索", dica: "随意提问：芯片、引脚、外设或错误", exemplos: "试试：", lista: ["pin 32 esp32-s3", "usb c6", "brownout", "deep sleep"] },
};

function abrirBusca(consulta) {
	window.dispatchEvent(new CustomEvent("espdocs:abrir-busca", { detail: { consulta } }));
}

/* Barra de busca em destaque no hero da home. Abre o mesmo diálogo do cabeçalho. */
export default function BuscaDestaque({ locale = "pt" }) {
	const t = T[locale] ?? T.pt;
	return (
		<div className="mx-auto mt-9 w-full max-w-2xl">
			<button
				type="button"
				onClick={() => abrirBusca()}
				aria-label={`${t.rotulo} (Ctrl+K)`}
				className="group flex min-h-16 w-full cursor-text items-center gap-4 rounded-full border-2 border-line-strong bg-surface px-6 text-left shadow-[0_18px_40px_-20px_var(--shadow-ink)] transition-colors hover:border-accent focus-visible:border-accent"
			>
				<Search className="h-6 w-6 shrink-0 text-accent" aria-hidden="true" />
				<span className="flex-1 truncate text-base text-muted sm:text-lg">{t.dica}</span>
				<kbd className="hidden rounded-md border border-line bg-surface-2 px-2 py-1 font-mono text-xs font-semibold text-muted sm:inline">Ctrl K</kbd>
			</button>
			<p className="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm text-muted">
				<span>{t.exemplos}</span>
				{t.lista.map((ex) => (
					<button key={ex} type="button" onClick={() => abrirBusca(ex)} className="chip-btn">
						{ex}
					</button>
				))}
			</p>
		</div>
	);
}