import { Field, FieldLabel, FieldError, Input } from "@edr/ui-common";

interface PhoneInputProps {
  disabled?: boolean;
  countryCode?: React.ComponentProps<typeof Input>;
  phone?: React.ComponentProps<typeof Input>;
  countryCodeError?: { message?: string };
  phoneError?: { message?: string };
  label?: string;
}

export default function PhoneInput({
  disabled,
  countryCode: countryCodeProps,
  phone: phoneProps,
  countryCodeError,
  phoneError,
  label = "Phone Number",
}: PhoneInputProps) {
  return (
    <Field data-invalid={Boolean(countryCodeError || phoneError)}>
      <FieldLabel>{label}</FieldLabel>
      <div className="flex gap-2">
        <Input
          type="text"
          disabled={disabled}
          className="w-20"
          aria-invalid={Boolean(countryCodeError)}
          {...countryCodeProps}
        />
        <Input
          type="tel"
          placeholder="912345678"
          disabled={disabled}
          className="flex-1"
          aria-invalid={Boolean(phoneError)}
          {...phoneProps}
        />
      </div>
      <FieldError errors={[countryCodeError, phoneError]} />
    </Field>
  );
}
