import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";

// TableCell bileşeni tanımı
const TableCell = ({ text }) => {
  return (
    <View style={styles.tableCell}>
      <Text style={styles.secondaryTextSm}>{text}</Text>
    </View>
  );
};

// ProductCard bileşeni tanımı
const ProductCard = ({
  name,
  price,
  image,
  sku,
  quantity,
  onPress,
  onPressSecondary,
  cardSize,
}) => {
  return (
    <TouchableOpacity
      style={[
        styles.container,
        { width: cardSize === "large" ? "100%" : 330 },
      ]}
      onPress={onPress}
    >
      {/* Ürün Kodu */}
      <TableCell text={`Ürün Kodu: ${sku}`} />

      {/* Ürün Adı */}
      <TableCell text={`Ürün Adı: ${name}`} />

      {/* Ürün Fiyatı */}
      <TableCell text={`Ürün Fiyatı: ${price} ₺`} />

      <View style={styles.iconContainer}>
        {quantity > 0 ? (
          <TouchableOpacity style={styles.icon} onPress={onPressSecondary}>
            <Ionicons name="cart" size={20} color="white" />
          </TouchableOpacity>
        ) : (
          <TouchableOpacity style={styles.iconDisabled} disabled>
            <Ionicons name="cart" size={20} color="white" />
          </TouchableOpacity>
        )}
      </View>
    </TouchableOpacity>
  );
}

// Stil tanımları
const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: 330,
    borderRadius: 10,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 10,
    elevation: 5,
    marginBottom: 10,
  },
  tableCell: {
    flex: 1,
    paddingHorizontal: 5,
  },
  secondaryTextSm: {
    fontSize: 16,
    fontWeight: "bold",
  },
  iconContainer: {
    backgroundColor: "transparent",
    width: 40,
    height: 40,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  icon: {
    backgroundColor: "#f2bc00",
    width: 30,
    height: 30,
    borderRadius: 5,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  iconDisabled: {
    backgroundColor: "lightgray",
    width: 30,
    height: 30,
    borderRadius: 5,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
});

export default ProductCard;