
import { Container, Stack, Box, HStack, Button, Card, Heading, Image, Text, SimpleGrid, GridItem } from "@chakra-ui/react";
import ServicesList from "./ServicesList";
import MapWrapper from "./MapWrapper";

export default function ListingsMap() {

    return (
        <Container maxW="full" px={4}>
            <Stack direction={{base: "column", md: "row"}} gap="5" h="80vh">
                <Box p="2"
                     borderWidth="1px"
                     borderColor="border.disabled"
                     color="fg.disabled"
                     w={{base: "100%", md: "50%"}}
                     h="full"
                >
                    <ServicesList />
                </Box>
                <Box p="2"
                     borderWidth="1px"
                     borderColor="border.disabled"
                     color="fg.disabled"
                     w={{base: "100%", md: "50%"}}
                     h="full"
                >
                    <MapWrapper />
                </Box>
            </Stack>
        </Container>
    )
}