import React from 'react';
import { Actionable, Flexbox, Image, Text, Button } from '@evlop/native-components';
import { Money, ShopifyProduct } from '@evlop/shopify';

interface ProductDisplayCardProps {
  data: {
    product: ShopifyProduct;
  };
}

export default function ProductDisplayCard({ data }: ProductDisplayCardProps) {
  return (
    <Actionable action={data.product.actions.openDetailsPage}>
      <Flexbox flexDirection="column" gap={10}>
        <Flexbox flexDirection="column" gap={5}>
          <Image 
            borderRadius={5} 
            resizeMode="cover" 
            src={data.product.images[0].url} 
            aspectRatio={1} 
          />
        </Flexbox>
        <Flexbox flexDirection="column" gap={4}>
          <Flexbox alignItems="center" justifyContent="space-between">
            <Text fontWeight="Bold" color="primary">
              <Money price={data.product.variants[0].price} />
            </Text>
            <Button 
              py={8} 
              variant="ghost" 
              color="primary" 
              icon="material-community-icons:cart-plus" 
              size="sm" 
              action={data.product.actions.addToCart} 
            />
          </Flexbox>
          <Text numberOfLines={2} fontSize="sm">
            {data.product.title}
          </Text>
        </Flexbox>
      </Flexbox>
    </Actionable>
  );
}

{}