/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import InternationalPhoneInput from "./InternationalPhoneInput";

interface Props {
  label: string;
  required?: boolean;
  value?: string;
  onChange?: (val: string) => void;
  country?: string;
  error?: any;
}

const NotchedPhoneField: React.FC<Props> = ({
  label,
  required,
  value,
  onChange,
  country,
  error,
}) => {
  return (
    <>
    <style>
        {
            `
            /* ===== NOTCHED FIELD ===== */
.notched-field {
  position: relative;
}

.notched-label {
  position: absolute;
  top: -9px;
  left: 14px;
  background: #fff;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #9aa4b2;
  z-index: 2;
}

/* ===== PHONE INPUT WRAPPER ===== */
.phone-wrapper {
  height: 52px;
  border-radius: 14px;
  border: 1.5px solid #e3e6eb;
  background: #fff;
  display: flex;
  align-items: center;
  padding-left: 6px;
}

/* react-phone-number-input root */
.phone-input-root {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Country select container */
.PhoneInputCountry {
  display: flex;
  align-items: center;
  padding-left: 6px;
}

/* Remove default arrow */
.PhoneInputCountrySelectArrow {
  display: none;
}

/* Number input */
.phone-number-input {
  border: none !important;
  outline: none !important;
  height: 100%;
  font-size: 13px;
  padding-left: 10px;
  background: transparent;
}

/* Focus state */
.phone-wrapper:focus-within {
  border-color: #001a72;
}

/* Error state */
.notched-field .is-invalid .phone-wrapper,
.phone-wrapper.is-invalid {
  border-color: #dc3545;
}

            `
        }
    </style>
    <div className="notched-field">
      <label className="notched-label">
        {label} {required && <span className="text-danger">*</span>}
      </label>

      <InternationalPhoneInput
        value={value}
        onChange={onChange}
        country={country}
        error={error}
        className="notched-phone-input"
      />

      {error && <div className="text-danger font-12 mt-1">{error}</div>}
    </div>
    </>
  );
};

export default NotchedPhoneField;