"use client";
import { useGewest, type Gewest } from "@/lib/context/gewest";

const gewesten: Gewest[] = ["Vlaanderen", "Wallonië", "Brussel"];

export default function GewestSelector() {
  const { gewest, setGewest } = useGewest();

  return (
    <div>
      <p className="text-xs text-slate-400 mb-2">Gewest</p>
      <div className="flex flex-col gap-1">
        {gewesten.map((g) => (
          <button
            key={g}
            onClick={() => setGewest(g)}
            className={`text-left text-sm px-3 py-1.5 rounded transition-colors ${
              gewest === g
                ? "bg-indigo-600 text-white font-medium"
                : "text-slate-300 hover:bg-slate-700"
            }`}
          >
            {g}
          </button>
        ))}
      </div>
    </div>
  );
}