PliWould/components/ProductTile.tsx

import { Product } from "@/lib/product"
import { ImageBackground, StyleProp, StyleSheet, Text, TouchableHighlight, View, ViewStyle } from "react-native";
import { AnimatedStyle } from "react-native-reanimated";

export type OnProductSelectedFunc = (product : Product) => any;

type MyStyle = StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;

export type ProductTileProps = {
    product: (Product),
    onProductSelected?: OnProductSelectedFunc,
    isActive: boolean,
    style?: {
        default?: {
            highlight?: MyStyle,
            text?: MyStyle,
            image?: MyStyle,
        }
        active?: {
            highlight?: MyStyle,
            text?: MyStyle,
            image?: MyStyle,
        }
    }
}

const FALLBACK_IMAGE = "";

export function ProductTile ({product, onProductSelected, isActive, style} : ProductTileProps) {
    const _style = (isActive ? style?.active : style?.default) || {};
    return (

        <TouchableHighlight
            style={_style.highlight || styles.highlight}
            onPress={() => onProductSelected && onProductSelected(product)}>
            <Text style={_style.text || styles.text}>
                {product.attributes.name || `Product ${product.id}`}
                ({product.pricePerUnitDisplay})
            </Text>
      </TouchableHighlight>
    );
}

const styles = StyleSheet.create({
    highlight: {

    },
    image: {

    },
    text: {

    },
    tile: {

    },
})