edr-platform/apps/edr-hr-web/src/shared/components/BilingualTextInput.tsx

import { Group, Input, TextInput } from "@mantine/core";

import type { LocalizedName } from "../types";

/**
 * One control for the `{am, en}` jsonb shape used across the platform.
 *
 * Kept as a single labelled unit rather than two loose fields so the pair reads
 * as one value, and so a validation error lands on the pair — which is how the
 * Zod schemas model it.
 */
export function BilingualTextInput({
  label,
  value,
  onChange,
  required,
  error,
  disabled,
  placeholderAm = "በአማርኛ",
  placeholderEn = "In English",
}: {
  label: string;
  value: Partial<LocalizedName> | null | undefined;
  onChange: (next: LocalizedName) => void;
  required?: boolean;
  error?: string;
  disabled?: boolean;
  placeholderAm?: string;
  placeholderEn?: string;
}) {
  const current = { am: value?.am ?? "", en: value?.en ?? "" };

  return (
    <Input.Wrapper label={label} required={required} error={error}>
      <Group gap="xs" grow mt={4}>
        <TextInput
          placeholder={placeholderEn}
          value={current.en}
          disabled={disabled}
          error={Boolean(error)}
          onChange={(event) =>
            onChange({ ...current, en: event.currentTarget.value })
          }
        />
        <TextInput
          placeholder={placeholderAm}
          value={current.am}
          disabled={disabled}
          error={Boolean(error)}
          onChange={(event) =>
            onChange({ ...current, am: event.currentTarget.value })
          }
        />
      </Group>
    </Input.Wrapper>
  );
}