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

const ShowroomSection = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>HỆ THỐNG SHOWROOM</Text>
      <View style={styles.divider} />
      <View style={styles.content}>
        <View style={styles.itemShoroom}>
          <Image
            source={require("../../../assets/images/icon-showroom-gray.png")}
            style={styles.showroomImage}
          />
          <Text style={styles.addressList}>
            Showroom 1: 49 Thái Hà - Đống Đa - Hà Nội
          </Text>
        </View>
        <View style={styles.itemShoroom}>
          <Image
            source={require("../../../assets/images/icon-showroom-gray.png")}
            style={styles.showroomImage}
          />
          <Text style={styles.addressList}>
            Showroom 2: 151 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội
          </Text>
        </View>
        <View style={styles.itemShoroom}>
          <Image
            source={require("../../../assets/images/icon-showroom-gray.png")}
            style={styles.showroomImage}
          />
          <Text style={styles.addressList}>
            Showroom 3: 63 Trần Thái Tông - Cầu Giấy - Hà Nội
          </Text>
        </View>
        <View style={styles.itemShoroom}>
          <Image
            source={require("../../../assets/images/icon-showroom-gray.png")}
            style={styles.showroomImage}
          />
          <Text style={styles.addressList}>
            Showroom 4: 158 - 160 Lý Thường Kiệt - Quận 10 - TPHCM
          </Text>
        </View>
        <View style={styles.itemShoroom}>
          <Image
            source={require("../../../assets/images/icon-showroom-gray.png")}
            style={styles.showroomImage}
          />
          <Text style={styles.addressList}>
            Showroom 5: 330-332 Võ Văn Tần - P. 5 - Q. 3 - TPHCM
          </Text>
        </View>
        <View style={styles.itemShoroom}>
          <Image
            source={require("../../../assets/images/icon-showroom-gray.png")}
            style={styles.showroomImage}
          />
          <Text style={styles.addressList}>
            Showroom 6: Số 51 Trần Hưng Đạo - Đại Phúc - Bắc Ninh
          </Text>
        </View>
      </View>
    </View>
  );
};

export default ShowroomSection;

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    borderWidth: 1,
    borderColor: "rgba(212, 212, 212, 1)",
    padding: 10,
    marginTop: 12,
    backgroundColor: "#fff",
  },
  content: {},
  title: {
    fontSize: 14,
    fontWeight: "700",
    color: "rgba(0, 0, 0, 1)",
    textTransform: "uppercase",
  },
  divider: {
    height: 1,
    backgroundColor: "#E3E3E3",
    borderWidth: 1,
    borderColor: "rgba(227, 227, 227, 1)",
    marginTop: 15,
  },
  itemShoroom: {
    flexDirection: "row",
    alignItems: "center",
    gap: 9,
    marginTop: 10,
  },
  imageGrid: {
    flexDirection: "column",
  },
  showroomImage: {
    width: 20,
    height: 20,
  },
  addressList: {
    fontSize: 11,
    fontWeight: "400",
    color: "rgba(0, 0, 0, 1)",
    flex: 1,
  },
});
