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


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

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

const MenuCard:React.FC<donutCardProps> = ({
    id,
    index,
    type, 
    name,
    donutname,
    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:card_width, height: card_width, 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}}>{donutname}</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 MenuCard

const styles = StyleSheet.create({})