"use client";

import { useState } from "react";
import { t, type Locale } from "@/lib/i18n";
import { searchItems, type Item } from "@/lib/items";

export default function SearchButton({
    locale,
    onResults,
}: {
    locale: Locale;
    onResults: (items: Item[], error: string) => void;
}) {
    const [loading, setLoading] = useState(false);

    async function handleSearch() {
        const query = (document.getElementById("search-input") as HTMLInputElement)?.value.trim();
        if (!query) return;

        setLoading(true);

        try {
            const result = await searchItems(query);
            onResults(result.items, result.error);
        } finally {
            setLoading(false);
        }
    }

    return (
        <>
            <input type="text" id="search-input" placeholder={t(locale, "articles.search")} className="ml-2 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100" />
            <button
                type="button"
                onClick={handleSearch}
                className="inline-flex h-10 items-center rounded-lg bg-white/10 px-4 text-sm font-semibold text-white ring-1 ring-white/30 transition hover:bg-white/20"
            >
                {loading ? t(locale, "articles.loading") : t(locale, "articles.search")}
            </button>
        </>
    );
}