import { 
    View, 
    Dimensions, 
    StyleSheet,
    ViewStyle, 
  } from 'react-native';
  
import React from 'react';

import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Text, Button } from "@ui-kitten/components";
import { appTheme } from "../theme";
import { Property } from '../types/property';

import ImageCarousel from './ImageCarousel';
import Row from './Row';
import CardInformation from './CardInformation';
  
const LISTMARGIN = 10;
const WIDTH = Dimensions.get("screen").width - LISTMARGIN * 2;


//each property listing is shown as a card, using this component
const Card = ({ property, style,}:{property: Property; style?: ViewStyle;}) => {
  return (
    <View style={{ marginVertical: 5 }}>

      <ImageCarousel images={property.images}/>          

    {/* Everything under the image is wrapped in this view */}
      <CardInformation property={property}/>

    </View> 
  )
}

export default Card

const styles = StyleSheet.create({

  button: {
    width: "49%",
  },
  defaultMarginTop: {
    marginTop: 5
  },
  rowJustification: {
    justifyContent: "space-between" 
  },
  informationContainer: {
    paddingVertical: 10,
    paddingHorizontal: 5,
    borderColor: "#d3d3d3",
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    borderWidth: 1,
  }


})