import { useState, useEffect } from "react";
import { Dropdown } from "./Dropdown";
import { DropdownItem } from "./types";
import CountryData from "@/public/data/countries.json";

interface MobileNumberProps {
  mobileCode: string;
  setMobileCode: (code: string) => void;
  mobileNumber: string;
  setMobileNumber: (number: string) => void;
}

export default function MobileNumber({
  mobileCode,
  setMobileCode,
  mobileNumber,
  setMobileNumber,
}: MobileNumberProps) {
  const [mobileValue, setMobileValue] = useState("");
  const [mobileError, setMobileError] = useState("");

  useEffect(() => {
    if (mobileNumber) {
      setMobileValue(mobileNumber);
    }
  }, [mobileNumber]);

  const handleSelect = (item: DropdownItem | null) => {
    if (item) {
      setMobileCode(item.dial_code);
    }
  };

  const handleMobileChange = (value: string, error: string) => {
    setMobileValue(value);
    setMobileError(error);
    setMobileNumber(value);
  };

  return (
    <div className="flex flex-col gap-2">
      <Dropdown
        data={CountryData}
        label="Mobile number"
        onSelect={handleSelect}
        preselectedId={mobileCode}
        mobileValue={mobileValue}
        onMobileChange={handleMobileChange}
      />
      {mobileError && <p className="text-sm text-red-600">{mobileError}</p>}
    </div>
  );
}