import { StyleSheet, Text, View, Pressable, Image} from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';



const HomeCardItem = () => {
  const navigation = useNavigation();

  return (
    <View style={{padding: 5}}>
      <View style={{shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
        <Pressable>
          <View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
            <Image source={require('../../assets/images/menu/coming_soon.png')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
            <View style={{padding: 10}}>
              <Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Pokémon Donuts<Text style={{fontSize: 12, color: '#DA7297'}}>(Coming soon)</Text></Text>
              <Text>The limited-edition Pokémon Donuts is coming soon!</Text>
            </View>
          </View>
        </Pressable>
      </View>

      <View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
        <Pressable onPress={() => navigation.navigate('menu')}>
          <View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
            <Image source={require('../../assets/images/menu/new_special.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
            <View style={{padding: 10}}>
              <Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Mothers Day Box for your mama</Text>
              <Text>Lets show our appreciation for our moms by treating them with the special Mothers Day Box!</Text>
              <Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
                <Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
              </Pressable>
            </View>
          </View>
        </Pressable>
      </View>

      <View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
        <Pressable onPress={() => navigation.navigate('menu')}>
          <View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
            <Image source={require('../../assets/images/menu/new_drink.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
            <View style={{padding: 10}}>
              <Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Colorful Smoothies are here</Text>
              <Text>The colors are not due to artificial colorings, but rather from natural fruits and vegetables</Text>
              <Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
                <Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
              </Pressable>
            </View>
          </View>
        </Pressable>
      </View>
    </View>
  )
}

export default HomeCardItem

const styles = StyleSheet.create({})