"use client";

import { useRouter } from "next/navigation";

export default function BrowseClient({
    groups,
    selectedGroup,
}: {
    groups: string[];
    selectedGroup: string | null;
}) {
    const router = useRouter();

    function select(g: string | null) {
        if (g === null) {
            router.push("/browse");
        } else {
            router.push(`/browse?group=${encodeURIComponent(g)}`);
        }
    }

    return (
        <div className="mb-8 flex flex-wrap gap-2">
            <button
                onClick={() => select(null)}
                className={`rounded-full px-4 py-1.5 text-xs font-semibold transition-colors ${selectedGroup === null
                        ? "bg-cyan-500 text-slate-900"
                        : "border border-slate-700 bg-slate-800/50 text-slate-400 hover:border-slate-500 hover:text-slate-200"
                    }`}
            >
                All
            </button>
            {groups.map((g) => (
                <button
                    key={g}
                    onClick={() => select(g)}
                    className={`rounded-full px-4 py-1.5 text-xs font-semibold transition-colors ${selectedGroup === g
                            ? "bg-cyan-500 text-slate-900"
                            : "border border-slate-700 bg-slate-800/50 text-slate-400 hover:border-slate-500 hover:text-slate-200"
                        }`}
                >
                    {g}
                </button>
            ))}
        </div>
    );
}