Product display

This is a landing block for a restaurant website. It features a title, a short descriptive text, a 'Book a table' button, and a link to the restaurant's menu.

import React from 'react';
import { StyleSheet } from 'react-native';
import { Text, Box, Image, Button } from '@evlop/native-components';
import { Money } from '@evlop/shopify';
import LinearGradient from 'react-native-linear-gradient';

const ProductCard = ({ data }) => {
  if (data?.product?.loading) {
    return (
      <Box style={styles.messageContainer}>
        <Text style={styles.messageText}>Loading product...</Text>
      </Box>
    );
  }

  if (!data?.product) {
    return (
      <Box style={styles.messageContainer}>
        <Text style={styles.messageText}>Product not found.</Text>
      </Box>
    );
  }

  return (
    <Box style={styles.container}>
      <Text style={styles.title}>
        {data.product.title}
      </Text>

      <Box style={styles.imageWrapper}>
        <LinearGradient
          colors={['#FF6A00', '#EE0979']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.gradient}
        >
          <Image
            src={data.product.images[0].src}
            style={styles.image}
            resizeMode="cover"
          />
        </LinearGradient>
      </Box>

      <Text style={styles.description} numberOfLines={2}>
        {data.product.description}
      </Text>
      
      <Text style={styles.price}>
        <Money money={data.product.variants[0].price} />
      </Text>

      <Button 
        icon="material-community-icons:cart-plus"
        variant="outlined" 
        size="lg" 
        action={data.product.actions.addToCart} 
        mt="2xs"
      >
        Add to Cart
      </Button>
    </Box>
  );
};

const styles = StyleSheet.create({
  messageContainer: {
    padding: 24,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 200,
  },
  messageText: {
    fontSize: 18,
    color: '#6B7280', 
    textAlign: 'center',
  },
  container: {
    padding: 24, 
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontWeight: 'bold',
    fontSize: 28, 
    textAlign: 'center',
    marginBottom: 16, 
  },
  imageWrapper: {
    width: 250,
  },
  gradient: {
    borderRadius: 250, 
    padding: 10,
  },
  image: {
    width: '100%',
    aspectRatio: 1,
    borderRadius: 250,
  },
  description: {
    fontSize: 18, 
    textAlign: 'center',
    color: '#111827', 
    marginTop: 16, 
    marginHorizontal: 24, 
  },
  price: {
    color: '#EE0979', 
    fontWeight: 'bold',
    fontSize: 28, 
    marginTop: 8, 
  }
});

export default ProductCard;