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

interface SupplierItemProps {
  name: string;
  distance: string;
  rating: number;
  logo: any; // require('...') dùng để import hình ảnh cục bộ
  shippingPolicy: string;
  priceRange: string;
  hasVAT: boolean;
  products: string[];
}

const SupplierItem: React.FC<SupplierItemProps> = ({
  name,
  distance,
  rating,
  logo,
  shippingPolicy,
  priceRange,
  hasVAT,
  products,
}) => {
  return (
    <View style={styles.ItemSupplier}>
      {/* Logo + info */}
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <View
          style={{
            marginRight: 10,
            alignItems: "center",
          }}
        >
          <View
            style={{
              width: 50,
              height: 50,
              padding: 10,
              borderWidth: 1,
              borderColor: "#F3F3F3",
              borderRadius: 4,
            }}
          >
            <Image
              source={logo}
              style={{ width: "100%", height: "100%", resizeMode: "contain" }}
            />
          </View>
        </View>
        <View
          style={{
            borderLeftWidth: 1,
            borderColor: "#b3b3b3",
            paddingLeft: 10,
          }}
        >
          <Text>
            <Ionicons name="star" size={14} color="#ff7a00" />
            <Ionicons name="star" size={14} color="#ff7a00" />
            <Ionicons name="star" size={14} color="#ff7a00" />
            <Ionicons name="star" size={14} color="#ff7a00" />
            <Ionicons name="star" size={14} color="#D9D9D9" />
          </Text>
          <Text style={{ color: "#1877F2", fontWeight: "bold" }}>{name}</Text>
        </View>
        <View
          style={{
            flexDirection: "column",
            marginLeft: 10,
            borderLeftWidth: 1,
            borderColor: "#b3b3b3",
            paddingLeft: 10,
          }}
        >
          <Text
            style={{
              color: "#E85933",
            }}
          >
            Xem 7 cửa hàng
          </Text>
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            <Image
              source={require("../../../assets/images/icon_map.png")}
              alt="icon store"
              style={{ width: 10 }}
              resizeMode="contain"
            />
            <Text style={{ marginLeft: 5 }}>3km</Text>
          </View>
        </View>
      </View>

      {/* Giá */}
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          marginBottom: 5,
          marginTop: 5,
        }}
      >
        <Text style={{ flexDirection: "row", alignItems: "center" }}>
          <Text>Giá: </Text>
          <Text style={{ color: "#D80A00", fontWeight: "bold" }}>
            {priceRange}
          </Text>
        </Text>
        {hasVAT && (
          <Text style={{ marginLeft: 10, fontWeight: "bold" }}>Đã có VAT</Text>
        )}
      </View>

      {/* Sản phẩm */}
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          marginBottom: 5,
          flexWrap: "wrap",
        }}
      >
        {products.map((item, index) => (
          <Text
            key={index}
            style={{
              paddingRight: 10,
              borderRightWidth: index < products.length - 1 ? 1 : 0,
              borderColor: "#D9D9D9",
              marginRight: 10,
            }}
          >
            {item}
          </Text>
        ))}
      </View>

      {/* Chính sách giao hàng */}
      <View style={{ flex: 1, marginBottom: 10 }}>
        <Text>{shippingPolicy}</Text>
      </View>

      {/* Liên hệ */}
      <View
        style={{ flex: 1, justifyContent: "center", alignItems: "flex-end" }}
      >
        <TouchableOpacity
          style={{
            width: 130,
            height: 40,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#F97316",
            borderRadius: 6,
          }}
        >
          <Text style={{ color: "#fff", fontWeight: "500" }}>Liên hệ ngay</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default SupplierItem;

const styles = StyleSheet.create({
  ItemSupplier: {
    flex: 1,
    marginTop: 10,
    paddingBottom: 10,
    paddingTop: 10,
    borderBottomWidth: 1,
    borderColor: "#e3e3e3",
  },
});
