import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Flex, HStack, Icon, Text, } from "@chakra-ui/react";
import { Pin } from "@feedloop/icon";
import React from "react";
export const LocationDetail = React.memo(function _LocationDetail(props) {
    const handleClick = React.useCallback(() => {
        props.onClick(props.lngLat.lng, props.lngLat.lat);
    }, []);
    return (_jsx(Box, Object.assign({ p: "1rem 0.8rem", borderRadius: "md", bg: "white", w: "full", onClick: handleClick, _hover: props._hover }, { children: _jsxs(HStack, Object.assign({ alignItems: "start", spacing: 4 }, { children: [_jsx(Flex, Object.assign({ rounded: "full", m: 0, p: "6px", bg: "#E6F0FF" }, { children: _jsx(Icon, { as: Pin, color: "#0065FF", fontSize: "lg" }) })), _jsxs(Box, Object.assign({ flex: 1 }, { children: [_jsx(Text, Object.assign({ fontWeight: 600 }, { children: props.title })), _jsx(Text, Object.assign({ color: "#6F809A", noOfLines: 3 }, { children: props.description }))] }))] })) })));
});
//# sourceMappingURL=location-detail.map.js.map