import { Product } from "@/utils/api";
import { COLORS } from "@/utils/colors";
import { useRouter } from "expo-router";
import React from "react";
import { Pressable, StyleSheet, Text, Image, View } from "react-native";

interface ProductCardProps {
  product: Product;
}

const ProductCard = ({ product }: ProductCardProps) => {
  const router = useRouter();
  return (
    <Pressable
      style={styles.productCard}
      onPress={() => router.push(`/product/${product.id}`)}
    >
      <Image source={{ uri: product.image }} style={styles.image} />
      <View style={styles.productInfo}>
        <Text style={styles.title} numberOfLines={2}>
          {product.title}
        </Text>
        <Text style={styles.price}>{product.price}</Text>
      </View>
    </Pressable>
  );
};

export default ProductCard;

const styles = StyleSheet.create({
  productCard: {
    flex: 1,
    margin: 0,
    gap: 8,
    padding: 12,
    borderRadius: 16,
    backgroundColor: "#fff",
    boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
  },
  image: {
    width: "100%",
    height: 150,
    borderRadius: 12,
  },
  productInfo: {
    gap: 4,
  },
  title: {
    fontSize: 14,
    fontWeight: "500",
  },
  price: {
    fontSize: 16,
    fontWeight: "600",
    color: COLORS.primary,
  },
});