introducing specific country selct component

src/components/ui/CountrySelect.jsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { useWordpressCustomData } from "../../services/WordpressFetchData.js";
+import { useUser } from "../../hooks/useUser.jsx";
+
+export default function CountrySelect() {
+	const availableCountries = useWordpressCustomData("/available-countries");
+	const { country, changeCountry } = useUser();
+
+	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+
+	if (!availableCountries || !country) return <div className='country-select'>Loading...</div>;
+
+	function handleChangeCountry(key, value) {
+		changeCountry({ name: value, iso: key });
+		handleShowHideSubmenu();
+	}
+	function handleShowHideSubmenu() {
+		setIsSubmenuOpen(!isSubmenuOpen);
+	}
+
+	const countryOptions = Object.keys(availableCountries).map((key, value) => (
+		<li
+			key={uuidv4()}
+			className='country-select__option'
+			onClick={() => handleChangeCountry(key, availableCountries[key])}>
+			<img className='flag' src={`https://flagsapi.com/${key}/flat/32.png`} alt='' />
+			{availableCountries[key]}
+		</li>
+	));
+
+	if (!countryOptions) return;
+
+	return (
+		<div className='country-select'>
+			<button className='country-select__toggle' onClick={handleShowHideSubmenu}>
+				<img className='flag' src={`https://flagsapi.com/${country.iso}/flat/32.png`} alt='' />
+				{country.name}
+			</button>
+			<ul className='country-select__country-list' aria-hidden={!isSubmenuOpen}>
+				{countryOptions}
+			</ul>
+		</div>
+	);
+}