import React from 'react';
import { Image, View, ViewBase } from 'react-native';
import { Flex } from '../../../Flex/native';
import { TextNative } from '../../../TextNative';
import HamburgerImage from './images/hamburguer.png';
import SushiImage from './images/sushi.png';

export function CardSushi(): any {
   return (
      <Card
         title="HOT ROLL PHILADELPHIA - 06 UNIDADES"
         description="Enrolado empanado crocante com salmão, cream cheese e molho tarê."
         price="R$ 16,90"
         image={SushiImage}
      />
   );
}

export function CardHamburguer(): any {
   return (
      <Card
         title="DUPLO CHEDDAR MCMELT"
         description="O duplo cheddar traz o pão do cheddar McMelt, duas camadas de molho cheddar, duas camadas de cebola ao molho shoyu e dois hambúrgueres"
         price="R$ 25,90"
         image={HamburgerImage}
      />
   );
}

export function Card({ title, description, price, image }): any {
   return (
      <View style={{ margin: 10, borderBottomColor: '#eee', borderBottomWidth: 1 }}>
         <Flex horizontal>
            <Flex flex={1}>
               <TextNative size={13} color="black" style={{ paddingBottom: 10 }}>
                  {title}
               </TextNative>
               <TextNative size={13} color="#bbb" style={{ paddingBottom: 10 }}>
                  {description}
               </TextNative>
               <TextNative size={13} color="black" style={{ paddingBottom: 10 }}>
                  {price}
               </TextNative>
            </Flex>
            <Flex>
               <Image source={image || null} style={{ width: 100, height: 100, margin: 10 }} />
            </Flex>
         </Flex>
      </View>
   );
}
