"use client";

import { useTranslations } from "next-intl";

export function TypeToggle({
  value,
  onChange,
}: {
  value: "PAID" | "FREE";
  onChange: (value: "PAID" | "FREE") => void;
}) {
  const t = useTranslations("dashboard");
  return (
    <div className="flex flex-wrap gap-2">
      <button
        type="button"
        onClick={() => onChange("PAID")}
        className={`min-h-11 rounded-full px-4 py-2 text-sm ${value === "PAID" ? "bg-brand text-white" : "border border-line"}`}
      >
        {t("paid")}
      </button>
      <button
        type="button"
        onClick={() => onChange("FREE")}
        className={`min-h-11 rounded-full px-4 py-2 text-sm ${value === "FREE" ? "bg-brand text-white" : "border border-line"}`}
      >
        {t("free")}
      </button>
    </div>
  );
}