edr-platform/apps/edr-freight-web/portal/src/components/auth/PhoneInput.tsx

import { Group, Stack, Text, TextInput, type TextInputProps } from "@mantine/core";

type InputPassthrough = Partial<TextInputProps>;

interface PhoneInputProps {
  disabled?: boolean;
  countryCode?: InputPassthrough;
  phone?: InputPassthrough;
  countryCodeError?: { message?: string };
  phoneError?: { message?: string };
  label?: string;
}

export default function PhoneInput({
  disabled,
  countryCode: countryCodeProps,
  phone: phoneProps,
  countryCodeError,
  phoneError,
  label = "Phone Number",
}: PhoneInputProps) {
  const errorMsg = countryCodeError?.message ?? phoneError?.message;
  return (
    <Stack gap={6}>
      <Text size="sm" fw={500} c="edr-text">{label}</Text>
      <Group gap={8} wrap="nowrap" align="flex-start">
        <TextInput
          w={80}
          disabled={disabled}
          error={Boolean(countryCodeError)}
          styles={{ input: { textAlign: "center" } }}
          {...countryCodeProps}
        />
        <TextInput
          style={{ flex: 1 }}
          placeholder="912345678"
          disabled={disabled}
          error={Boolean(phoneError)}
          {...phoneProps}
        />
      </Group>
      {errorMsg && (
        <Text size="xs" c="red.6">{errorMsg}</Text>
      )}
    </Stack>
  );
}