<Card
  accessible={true}
  accessibilityRole="article"
  accessibilityLabel="Product card for Jupiter Glasses"
  importantForAccessibility="yes"
>
  <CardHeader
    imageSource={require("../assets/grub.png")}
    accessibilityLabel="Jupiter Glasses product image"
    accessibilityRole="image"
  >
    <View className="flex-row items-center justify-between">
      <CardTitle
        style={styles.InterSemiBold}
        accessibilityRole="heading"
        accessibilityLevel={2}
        nativeID="product-title"
      >
        Jupiter Glasses
      </CardTitle>
      <Badge
        variant="warning"
        accessibilityLabel="Inventory status: Last pair"
        accessibilityRole="text"
      >
        <Text>Last pair</Text>
      </Badge>
    </View>
    <CardDescription
      style={styles.Inter}
      accessibilityRole="text"
      accessibilityLabel="Price: 100 dollars"
      nativeID="product-price"
    >
      $100.00
    </CardDescription>
  </CardHeader>
  <CardFooter className="flex-row justify-between mt-0">
    <View
      style={{ flex: 1, marginRight: 8 }}
      accessibilityElementsHidden={false}
    >
      <Button
        variant="secondary"
        textSize="md"
        className="w-full tracking-tighter"
        accessibilityRole="button"
        accessibilityLabel="Add to cart"
        accessibilityHint="Adds Jupiter Glasses to your shopping cart"
        accessibilityState={{ disabled: false }}
      >
        Add to cart
      </Button>
    </View>
    <View style={{ flex: 1 }} accessibilityElementsHidden={false}>
      <Button
        variant="default"
        textSize="md"
        className="w-full tracking-tighter"
        accessibilityRole="button"
        accessibilityLabel="Purchase now"
        accessibilityHint="Proceeds directly to checkout with Jupiter Glasses"
        accessibilityState={{ disabled: false }}
      >
        Purchase
      </Button>
    </View>
  </CardFooter>
</Card>;