import { Dimensions, ImageBackground, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
import { AntDesign, MaterialIcons} from '@expo/vector-icons';
import React from 'react'


const card_width = Dimensions.get('window').width * 0.3;

interface DrinkCardProps {
  id: string;
  index: number;
  type: string; 
  name: string;
  image_item: ImageProps;
  average_rating: number;
  prices: any;
  buttonPressHandler: any; 
}


const DrinkCard:React.FC<DrinkCardProps> = ({
  id,
  index,
  type,
  name,
  image_item,
  average_rating,
  prices,
  buttonPressHandler,
}) => {

  return (
    <View style={{justifyContent: 'space-between', borderWidth: 1, borderRightColor: '#DA7297', borderLeftColor: '#DA7297', borderTopColor: '#DA7297', borderBottomColor: '#DA7297', padding: 10, borderRadius: 10, height: 250, width: 150}}>
        <View>
            <ImageBackground source={image_item} style={{width:120, height: 120, overflow: 'hidden'}} resizeMode= "contain">
                <View style={{flexDirection: 'row', gap: 3}}>
                    <AntDesign name="star" size={16} color="#DA7297"/>
                    <Text style={{color: '#EF5A6F', textAlign: 'right'}}>{average_rating}</Text>
                </View>
            </ImageBackground>
            <View style={{margin: 10}}>
                <Text style={{textAlign: 'center', color: '#DA7297', fontWeight: 500}}>{name}</Text>
            </View>
        </View>
        <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
            <Text style={{fontWeight: 600, color: '#EF5A6F'}}>$<Text>{prices.price}</Text></Text>
            <Pressable onPress={() => {}}>  
                <MaterialIcons name="add-circle" size={24} color="#EF5A6F" />
            </Pressable>
        </View>
    </View>
  )
}

export default DrinkCard

const styles = StyleSheet.create({})