PliWould/components/ProductTile.tsx

import { Product, priceDisplay, pricePerUnitDisplay } 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>>>;

type StyleSpec = {
    highlight?: MyStyle,
    text?: MyStyle,
    image?: MyStyle,
}


export type ProductTileProps = {
    product: (Product),
    onProductSelected?: OnProductSelectedFunc,
    isActive: boolean,
}

const FALLBACK_IMAGE = "";

export function ProductTile ({product, onProductSelected, isActive} : ProductTileProps) {
    const k = isActive ? "active" : "default";

    const priceDisplay = pricePerUnitDisplay(product);
    return (

        <TouchableHighlight
            aria-label={`product ${product.id}`}
            style={styles[k].highlight}
            onPress={() => onProductSelected && onProductSelected(product)}>
            <Text style={styles[k].text}>{product.attributes?.name || `Product ${product.id}`} ({priceDisplay})</Text>
      </TouchableHighlight>
    );
}

const styles = {
    active: StyleSheet.create({
        highlight: {
            padding: 10,
            margin: 2,
            color: "lightblue",
        },
        text: {
        }
    }),
    default: StyleSheet.create({
        highlight: {
            padding: 10,
            margin: 2,
            backgroundColor: "lightgrey",
        },
        text: {
        }
    }),
}