import React from 'react';
import { Box, Center, Text, Image, Flex } from 'native-base';
import { Pressable } from 'react-native';

interface CallOutProps {
    heading: string;
    address: string;
    time: string;
    imageUri: string;
    onPress?: () => void;
}

export default function (props: CallOutProps) {
    return <Pressable onPress={props.onPress}>
        <Box
            flexDirection={"row"}
            h="24"
            borderRadius={"xl"}
            borderWidth="1"
            pl="2"
            alignItems={"center"}
            borderColor={"mini_border_white_12"}
            bgColor="mini_border_gray">
            <Image
                source={{
                    uri: props.imageUri
                }}
                borderRadius="lg"
                h="20"
                w="24"
                mr="2"
            />
            <Flex p="2" maxHeight={"100%"} alignItems="start" justifyContent={"start"} >
                <Text isTruncated maxW={"40"} fontSize="md" lineHeight={"xl"}>
                    {props.heading}
                </Text>
                <Text isTruncated maxW={"32"} fontSize="sm" lineHeight={"lg"}>
                    {props.heading}
                </Text>
                <Flex direction={"row"} alignItems="center">
                    <Box bgColor="mini_green" borderRadius="full" h="1" w="1"></Box>
                    <Text fontSize="sm" ml="1" lineHeight={"lg"}>
                        {props.time}
                    </Text>
                </Flex>
            </Flex>
        </Box>
    </Pressable>
}