import React from "react";
import {
  View,
  ScrollView,
  Text,
  StyleSheet,
  TextInput,
  Dimensions,
} from "react-native";
import SupplierItem from "@components/product/SupplierItem";
import { Ionicons } from "@expo/vector-icons";
import Feather from "@expo/vector-icons/Feather";
const { width } = Dimensions.get("window");

const SupplierList = () => {
  const suppliers = [
    {
      name: "Hanoicomputer",
      distance: "3km",
      rating: 4.7,
      logo: require("../../../assets/images/logo-hacom.png"),
      shippingPolicy:
        "Miễn phí giao hàng\nNhận giao hàng và lắp đặt từ 8h00-21h30 các ngày trong tuần kể cả Thứ 7, CN",
      priceRange: "9.000.000đ - 20.000.000đ",
      hasVAT: true,
      products: ["8GB - 9.000.000đ new White", "8GB - 9.000.000đ new White"],
    },
    {
      name: "Hanoicomputer",
      distance: "3km",
      rating: 4.7,
      logo: require("../../../assets/images/logo-hacom.png"),
      shippingPolicy:
        "Miễn phí giao hàng\nNhận giao hàng và lắp đặt từ 8h00-21h30 các ngày trong tuần kể cả Thứ 7, CN",
      priceRange: "9.000.000đ - 20.000.000đ",
      hasVAT: true,
      products: ["8GB - 9.000.000đ new White", "8GB - 9.000.000đ new White"],
    },
    {
      name: "Hanoicomputer",
      distance: "3km",
      rating: 4.7,
      logo: require("../../../assets/images/logo-hacom.png"),
      shippingPolicy:
        "Miễn phí giao hàng\nNhận giao hàng và lắp đặt từ 8h00-21h30 các ngày trong tuần kể cả Thứ 7, CN",
      priceRange: "9.000.000đ - 20.000.000đ",
      hasVAT: true,
      products: ["8GB - 9.000.000đ new White", "8GB - 9.000.000đ new White"],
    },
  ];

  return (
    <ScrollView
      style={{
        padding: 10,
        backgroundColor: "#fff",
        marginTop: 15,
        borderRadius: 4,
      }}
    >
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          paddingBottom: 15,
        }}
      >
        <Text style={{ fontSize: 16, fontWeight: "bold" }}>
          Nhà cung cấp trên BestPC - Tại Hà Nội
        </Text>
      </View>

      <View style={styles.Form}>
        <Feather name="map-pin" size={20} color="#a6a6a6" />{" "}
        <TextInput
          placeholder="Nhập địa chỉ của bạn để tìm NCC gần nhất"
          style={styles.inputMap}
          placeholderTextColor="#666"
        />
      </View>

      {/* List */}
      {suppliers.map((item, index) => (
        <SupplierItem key={index} {...item} />
      ))}

      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
          marginTop: 10,
        }}
      >
        <Text
          style={{
            textAlign: "center",
            color: "#FF7A00",
            fontSize: 16,
          }}
        >
          Xem thêm
        </Text>
        <Ionicons
          name="chevron-down"
          style={{ marginLeft: 5 }}
          size={16}
          color="#FF7A00"
        />
      </View>
    </ScrollView>
  );
};

export default SupplierList;

const styles = StyleSheet.create({
  Form: {
    flexDirection: "row",
    alignItems: "center",
    position: "relative",
    borderWidth: 1,
    borderColor: "#b1b1b1",
    marginRight: 10,
    width: width - 40,
    height: 45,
    paddingHorizontal: 10,
    borderRadius: 4,
  },
  inputMap: {
    width: "100%",
  },
});
