import React from "react";
import { View, Text, Image, ScrollView, StyleSheet } from "react-native";
import { ServiceProviderCard } from "@components/repair/ServiceProviderCard";

const ServiceProviderList: React.FC = () => {
  const providers = [
    {
      name: "Gearvn.com",
      backgroundImage: require("../../../assets/images/showroom_gearvn.png"),
      favoriteIcon: require("../../../assets/images/icon_heart.png"),
      verifiedIcon: require("../../../assets/images/verifiedIcon.png"),
      specialties: ["Laptop", "Phụ kiện", "+3 Khác"],
      address:
        "Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3, TP. Hồ Chí Minh",
      phone: "Tel: 1800 6867 - 1800 6865",
      website: "https:/ CP.com.vn/",
      certifications: [
        {
          icon: require("../../../assets/images/icon_cert.png"),
          name: "CompTIA A+",
          color: "#fff8ee",
        },
        {
          icon: require("../../../assets/images/icon_cert.png"),
          name: "CompTIA Network+",
          color: "#fff8ee",
        },
      ],
      rate: 4,
      rating: "4.6",
      reviewCount: "26",
      showroomCount: "Có 7 showroom",
      isVerified: true,
    },
    {
      name: "Hoanglongcomputer",
      backgroundImage: require("../../../assets/images/showroom_hoanglong.png"),
      favoriteIcon: require("../../../assets/images/icon_heart.png"),
      specialties: ["Laptop", "Phụ kiện", "+3 Khác"],
      address:
        "Địa chỉ: Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3, TP. Hồ Chí Minh",
      phone: "Tel: 1800 6867 - 1800 6865",
      website: "https:/ CP.com.vn/",
      certifications: [
        {
          icon: require("../../../assets/images/icon_cert.png"),
          name: "CompTIA A+",
          color: "#fff8ee",
        },
        {
          icon: require("../../../assets/images/icon_cert.png"),
          name: "CompTIA Network+",
          color: "#fff8ee",
        },
      ],
      rate: 5,
      rating: "4.6",
      reviewCount: "26",
      showroomCount: "Có 7 showroom",
    },
  ];

  return (
    <View style={styles.providersContainer}>
      <Text style={styles.sectionTitle}>Địa chỉ nổi bật</Text>
      <View style={styles.providerRow}>
        {providers.map((provider, index) => (
          <ServiceProviderCard key={index} {...provider} />
        ))}
      </View>
    </View>
  );
};

export default ServiceProviderList;

const styles = StyleSheet.create({
  providersContainer: {
    marginTop: 16,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: "700",
    color: "rgba(0, 0, 0, 1)",
    textAlign: "center",
    marginBottom: 8,
  },
  providerRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 10,
    marginBottom: 10,
  },
});