import React, { ReactNode } from "react";
import {
  Image,
  AspectRatio,
  Box,
  Center,
  Stack,
  HStack,
  Text,
  Heading,
  IBoxProps,
} from "native-base";

export interface CardProps {
  imageURI: string;
  imageTag: string | null;
  boxProps?: IBoxProps;
  title: ReactNode;
  description: ReactNode;
  small: ReactNode;
}

export const Card = (props: CardProps) => {
  return (
    <Box
      width="full"
      rounded="lg"
      overflow="hidden"
      borderColor="coolGray.200"
      borderWidth="1"
      _dark={{
        borderColor: "coolGray.600",
        backgroundColor: "gray.700",
      }}
      _web={{
        shadow: 2,
        borderWidth: 0,
      }}
      _light={{
        backgroundColor: "gray.50",
      }}
      {...props.boxProps}
    >
      <Box>
        <AspectRatio maxH="200" w="100%" ratio={16 / 9}>
          <Image
            source={{
              uri: props.imageURI,
            }}
            alt="image"
          />
        </AspectRatio>
        {props.imageTag && (
          <Center
            bg="violet.500"
            _dark={{
              bg: "violet.400",
            }}
            _text={{
              color: "warmGray.50",
              fontWeight: "700",
              fontSize: "xs",
            }}
            position="absolute"
            bottom="0"
            px="3"
            py="1.5"
          >
            {props.imageTag}
          </Center>
        )}
      </Box>
      <Stack p="4" space={3}>
        <Stack space={2}>
          <Heading size="md" ml="-1">
            {props.title}
          </Heading>
          <Text
            fontSize="xs"
            _light={{
              color: "violet.500",
            }}
            _dark={{
              color: "violet.400",
            }}
            fontWeight="500"
            ml="-0.5"
            mt="-1"
          >
            The Silicon Valley of India.
          </Text>
        </Stack>
        <Text fontWeight="400">
          Bengaluru (also called Bangalore) is the center of India's high-tech
          industry. The city is also known for its parks and nightlife.
        </Text>
        <HStack alignItems="center" space={4} justifyContent="space-between">
          <HStack alignItems="center">
            <Text
              color="coolGray.600"
              _dark={{
                color: "warmGray.200",
              }}
              fontWeight="400"
            >
              6 mins ago
            </Text>
          </HStack>
        </HStack>
      </Stack>
    </Box>
  );
};

export default Card;