import useSWR from 'swr'
import { BASE_URL } from '../../constants'
import { fetcher } from '../../http/axiosInstance'

const RegionSelect = () => {
    const { data } = useSWR(`/gis/regions/borders`, (url) => fetcher(url, BASE_URL.nest), {
        revalidateOnFocus: false,
        revalidateIfStale: false
    })

    return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {Array.isArray(data) &&
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" width='100%' height='100vh' transform='scale(1, -1)'>
                    {data.map((el, index) => (
                        <path key={`path-${index}`} d={el.path} fill="white" stroke="black" />
                    ))}
                </svg>
            }
        </div>
    )
}

export default RegionSelect