"use client";

import { useLocale } from "@/components/providers/locale-provider";
import type { AiGenerationLanguage } from "@/lib/ai-brand-voice";

export function AiLanguageField({
  value,
  onChange,
  className,
}: {
  value: AiGenerationLanguage;
  onChange: (lang: AiGenerationLanguage) => void;
  className?: string;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";

  return (
    <label className={className ?? "block text-sm"}>
      <span className="mb-1 block text-muted-foreground">
        {isAr ? "اللغة *" : "Language *"}
      </span>
      <select
        className="h-9 w-full rounded-md border border-input bg-background px-2 text-sm"
        value={value}
        onChange={(e) => onChange(e.target.value as AiGenerationLanguage)}
        required
      >
        <option value="ar">{isAr ? "العربية" : "Arabic"}</option>
        <option value="en">{isAr ? "الإنجليزية" : "English"}</option>
      </select>
    </label>
  );
}