Location

import React, { useState, useEffect } from ‘react’;
import { ChevronDown, ChevronUp } from ‘lucide-react’;

const LocationPicker = () => {
// Sample data structure – in a real app, you would fetch this from an API
const locationData = {
“Cumbria”: [“Arthuret”, “Bewcastle”, “Brampton”, “Carlisle”],
“Devon”: [“Ashburton”, “Bickleigh”, “Crediton”, “Exeter”],
“Lancashire”: [“Blackburn”, “Burnley”, “Lancaster”, “Preston”],
“Suffolk”: [“Aldeburgh”, “Beccles”, “Ipswich”, “Lowestoft”] };

const [isOpen, setIsOpen] = useState(false);
const [counties, setCounties] = useState(Object.keys(locationData));
const [selectedCounty, setSelectedCounty] = useState(”);
const [parishes, setParishes] = useState([]);
const [selectedParish, setSelectedParish] = useState(”);
const [isLoading, setIsLoading] = useState(false);

// Update parishes when county selection changes
useEffect(() => {
if (selectedCounty) {
setIsLoading(true);

// Simulate API call delay
setTimeout(() => {
setParishes(locationData[selectedCounty] || []);
setSelectedParish(”);
setIsLoading(false);
}, 300);
} else {
setParishes([]);
setSelectedParish(”);
}
}, [selectedCounty]);

const handleCountyChange = (e) => {
setSelectedCounty(e.target.value);
};

const handleParishChange = (e) => {
setSelectedParish(e.target.value);
};

const handleSubmit = (e) => {
e.preventDefault();
if (selectedCounty && selectedParish) {
alert(`You selected: ${selectedParish}, ${selectedCounty}`);
setIsOpen(false); // Collapse after selection
// Here you would typically save the selection or navigate to another page
}
};

const toggleOpen = () => {
setIsOpen(!isOpen);
};

return (

);
};

export default LocationPicker;