formbricks/apps/web/modules/ee/multi-language-surveys/components/language-toggle.tsx

"use client";

import { useTranslation } from "react-i18next";
import { Language } from "@formbricks/database/generated/browser";
import { getLanguageLabel } from "@formbricks/i18n-utils/src/utils";
import type { TUserLocale } from "@formbricks/types/user";
import { Label } from "@/modules/ui/components/label";
import { Switch } from "@/modules/ui/components/switch";

interface LanguageToggleProps {
  language: Language;
  isChecked: boolean;
  onToggle: () => void;
  onEdit: () => void;
  locale: TUserLocale;
}

export function LanguageToggle({ language, isChecked, onToggle, onEdit, locale }: LanguageToggleProps) {
  const { t } = useTranslation();
  return (
    <div className="flex flex-col space-y-4">
      <div className="flex items-center space-x-4">
        <Switch
          checked={isChecked}
          id={`${language.code}-toggle`}
          onClick={(e) => {
            e.stopPropagation();
            onToggle();
          }}
        />
        <Label className="font-medium text-slate-800" htmlFor={`${language.code}-toggle`}>
          {getLanguageLabel(language.code, locale)}
        </Label>
        {isChecked ? (
          <p className="cursor-pointer text-xs text-slate-600 underline" onClick={onEdit}>
            {t("environments.surveys.edit.edit_translations", {
              lang: getLanguageLabel(language.code, locale),
            })}
          </p>
        ) : null}
      </div>
    </div>
  );
}