Pien-Studio/apps/web/components/ui-preferences.tsx

"use client";

import React from "react";
import { useUiStore } from "../store/ui-store";
import { isDarkTheme } from "../store/ui-store";
import { cx, subtleButtonClass } from "../lib/theme";
import { useTranslations } from "../hooks/use-translations";

export function UiPreferences({ compact = false }: { compact?: boolean }) {
  const { theme, locale, setTheme, setLocale } = useUiStore((s) => s);
  const { t } = useTranslations();
  const isDark = isDarkTheme(theme);
  const wrapperHeight = compact ? "h-7" : "h-9";
  const textSize = compact ? "text-[10px]" : "text-xs";

  return (
    <div className="flex flex-wrap items-center gap-2">
      <label className={cx("inline-flex items-center rounded border px-2", subtleButtonClass(isDark), wrapperHeight)}>
        <span className={cx("mr-2 font-semibold opacity-70", textSize)}>{t("ui.locale")}</span>
        <select
          aria-label={t("ui.locale")}
          value={locale}
          onChange={(event) => setLocale(event.target.value as "en" | "th" | "ja")}
          className={cx(
            "bg-transparent font-semibold outline-none",
            textSize,
            isDark ? "text-[#f5f7fa]" : "text-[#1f2430]",
          )}
        >
          <option value="en">English</option>
          <option value="th">Thai</option>
          <option value="ja">Japanese</option>
        </select>
      </label>
      <button
        type="button"
        onClick={() => {
          const next = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
          setTheme(next);
        }}
        className={cx("rounded border px-3 font-semibold", subtleButtonClass(isDark), wrapperHeight, textSize)}
      >
        {theme === "dark" ? t("ui.darkMode") : theme === "system" ? t("ui.systemMode") : t("ui.lightMode")}
      </button>
    </div>
  );
}