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


interface FavImgBackgroundProps {
    EnableBackHandler: boolean;
    id: string;
    image_item: ImageProps;
    name: string;
    donutname: string;
    type: string;
    calories: string;
    average_rating: number;
    ratings_count: string;
    description: string;
    favourite: boolean;
    ToggleFavourite: any;
    BackHandler?: any;
  }


const FavImgBackground: React.FC<FavImgBackgroundProps> = ({
    EnableBackHandler,
    id,
    image_item,
    name,
    donutname,
    calories,
    type,
    average_rating,
    ratings_count,
    description,
    favourite,
    ToggleFavourite,
    BackHandler,

}) => {

  return (
    <View>
      <ImageBackground source={image_item} style={{width: '100%', aspectRatio: 1, justifyContent: 'space-between', }}>
        {EnableBackHandler? (
            <View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',}}>
                <Pressable onPress={() => {BackHandler()}}>
                    <AntDesign name="left" size={24} color="gray" />
                </Pressable>
                <Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
                    <AntDesign name="heart" size={24} color="#EF5A6F" />
                </Pressable>
            </View>
        ):(
            <View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end',}}>
                <Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
                    <AntDesign name="heart" size={24} color="#EF5A6F" />
                </Pressable>
            </View>
        )}
        <View style={{paddingVertical: 10, paddingHorizontal: 10, backgroundColor: 'rgba(255, 255, 255, 0.8)', borderTopLeftRadius: 10, borderTopRightRadius: 10}}>
            <View style={{marginHorizontal: 10, marginVertical: 10}}>
                <Text style={{color: '#DA7297', fontSize: 22, fontWeight: 500}}>{donutname || name}</Text>    
            </View>
            <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 10, marginVertical: 10}}>
                <Text style={{color: '#DA7297', fontSize: 18}}>{calories} calories</Text>
                <View style={{flexDirection: 'row', gap: 3, alignItems: 'center'}}>
                    <AntDesign name="star" size={20} color="#EF5A6F"/>
                    <Text style={{color: '#DA7297', textAlign: 'right', fontSize: 18}}>{average_rating}</Text>
                    <Text style={{color: 'gray', fontSize: 12}}>({ratings_count})</Text>
                </View>
            </View>
        </View>
      </ImageBackground>
    </View>
  )
}

export default FavImgBackground

const styles = StyleSheet.create({})