PliWould/components/ProductTile.tsx

import { Product, priceDisplay, pricePerUnitDisplay } from "@/lib/product";
import { LinearGradient } from "expo-linear-gradient";
import {
  ImageBackground,
  Pressable,
  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 BLUE_HILIGHT = "#caceff";
  const BLUE = "#8b9cff";
  const GRAY_HILIGHT = "#ffffff";
  const GRAY = "#b1b1b1";

  const activeColors = [BLUE_HILIGHT, BLUE, BLUE, BLUE];
  const inactiveColors = [GRAY_HILIGHT, GRAY, GRAY, GRAY];

  const priceDisplay = pricePerUnitDisplay(product);
  return (
    <LinearGradient
      colors={isActive ? activeColors : inactiveColors}
      style={styles.gradientButton}
    >
      <Pressable
        style={styles.button}
        aria-label={`product ${product.id}`}
        onPress={() => onProductSelected && onProductSelected(product)}
      >
        <Text style={styles.text}>
          {product.attributes?.name || `Product ${product.id}`} ({priceDisplay})
        </Text>
      </Pressable>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  gradientButton: {
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "gray",
    borderStyle: "solid",
    margin: 1,
    width: 300,
    marginVertical: 10,
    marginHorizontal: 10,
  },
  button: {
  },
  text: {
    paddingVertical: 30,
    paddingHorizontal: 40,
  }
});