import useSWR from 'swr'
import { BASE_URL } from '../../constants'
import { fetcher } from '../../http/axiosInstance'
import { Flex } from '@mantine/core'

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

    return (
        <Flex align='center' justify='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>
            }
        </Flex>
    )
}

export default RegionSelect