import { CountryPhoneCode } from 'country-phone-code-yube';

import React, { useState } from 'react';

interface CountryData { code: string; name: string; phone: string;

}

const App: React.FC = () => {

const [selectedCountry, setSelectedCountry] = useState<CountryData | null>(null);

const [phoneNumber, setPhoneNumber] = useState('');

const handleCountrySelection = (country: CountryData) => { console.log('Selected Country:', country); setSelectedCountry(country); // Store selected country data if needed };

const handlePhoneNumberChange = (newPhoneNumber: string) => { setPhoneNumber(newPhoneNumber); // Update state dynamically };

return ( Select a Country

  {selectedCountry && (
    <div className="mt-4">
      <h2>Selected Country Details:</h2>
      <p>Country: {selectedCountry.name}</p>
      <p>Phone Code: {selectedCountry.phone}</p>
      {phoneNumber && (
        <p style={{ marginTop: '10px' }}>
          <strong>Your Phone Number: </strong> {phoneNumber}
        </p>
      )}
    </div>
  )}
</div>

); };

export default App;