import React from "react";
import { View, StyleSheet, Image, Text } from "react-native";

const CompanyInfo = () => {
  const infoItems = [
    {
      icon: require("../../../assets/images/icon_store_gray.png"),
      label: "Lĩnh vực",
      value: "Chuyên sửa chữa PC, laptop, linh phụ kiện máy tính",
    },
    {
      icon: require("../../../assets/images/icon-mohinh.png"),
      label: "Mô hình",
      value: "Cá nhân",
    },
    {
      icon: require("../../../assets/images/icon-times.png"),
      label: "Năm hoạt động",
      value: "5 năm",
    },
    {
      icon: require("../../../assets/images/icon-locahost.png"),
      label: "Địa chỉ",
      value:
        "Tầng 7, toà nhà số 198 Nguyễn Thị Minh Khai, phường 6, quận 3, TP. Hồ Chí Minh",
    },
    {
      icon: require("../../../assets/images/icon-vipham.png"),
      label: "Phạm vi hoạt động",
      value: "Tại cửa hàng / Bán kính quanh 20km",
    },
    {
      icon: require("../../../assets/images/icon-web.png"),
      label: "Website",
      value: "https://www.anphatpc.com.vn/",
      isLink: true,
    },
    {
      icon: require("../../../assets/images/icon-tel.png"),
      label: "Tel",
      value: "1900 0323 0918 557 006",
    },
    {
      icon: require("../../../assets/images/icon-email.png"),
      label: "Gmail",
      value: "Giang@anphatpc.com.vn",
    },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Thông tin</Text>
      <View style={styles.boxFlex}>
        {infoItems.map((item, index) => (
          <View key={index} style={styles.items}>
            <View style={styles.infoRow}>
              <Image source={item.icon} style={styles.icon} />
              <Text style={styles.label}>{item.label}</Text>
            </View>
            <Text style={[styles.value, item.isLink && styles.linkValue]}>
              {item.value}
            </Text>
          </View>
        ))}
      </View>
    </View>
  );
};
export default CompanyInfo;

const styles = StyleSheet.create({
  container: {
    borderColor: "rgba(212, 212, 212, 1)",
    borderRadius: 12,
    borderWidth: 1,
    marginTop: 9,
    padding: 10,
    backgroundColor: "#fff",
  },
  boxFlex: {},
  items: {
    flexDirection: "row",
    gap: 10,
    marginTop: 10,
  },
  title: {
    fontSize: 16,
    fontWeight: "700",
    color: "rgba(0, 0, 0, 1)",
  },
  infoRow: {
    width: 140,
    flexDirection: "row",
    alignItems: "center",
  },
  icon: {
    width: 20,
    height: 20,
    marginRight: 6,
    resizeMode: "contain",
  },
  label: {
    fontSize: 13,
    fontWeight: "400",
    color: "#303030",
  },
  valueContainer: {
    alignSelf: "stretch",
    marginTop: 10,
  },
  value: {
    fontSize: 13,
    fontWeight: "400",
    color: "#303030",
  },
  linkValue: {
    color: "rgba(24, 119, 242, 1)",
  },
});
