import {useTelephone, countries} from 'use-telephone';

export default function App() {
	const telephone = useTelephone();

	return (
		<>
			<select value={telephone.country} onChange={e => telephone.onChangeCountry(e.target.value)}>
				{countries.map(country => {
					return (
						<option key={country.value} value={country.value}>
							{country.label}
						</option>
					);
				})}
			</select>

			<img src={telephone.flag} alt="Flag of the current selected country" />

			<input placeholder="(xxx) xxx-xxxx" value={telephone.value} onChange={telephone.onChange} />
		</>
	);
}