import React, { useState } from "react";
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Linking,
  StyleSheet,
  Dimensions,
  Modal,
  ScrollView,
} from "react-native";
import EvilIcons from "@expo/vector-icons/EvilIcons";
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";

type Props = {
  visible: boolean;
  onClose: () => void;
};

const ListShowroom = ({ visible, onClose }: Props) => {
  return (
    <Modal visible={visible} animationType="fade" transparent>
      <View style={styles.overlay}>
        <View style={styles.container}>
          <View style={styles.header}>
            <Image
              source={require("../../../assets/images/image-showroom.png")}
              style={styles.imageShop}
            />
            <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
              <Text style={styles.iconcloseBtn}>
                <FontAwesome5 name="times" size={20} color="black" />
              </Text>
            </TouchableOpacity>
          </View>
          <ScrollView style={styles.contentShop}>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
            <View style={styles.itemShop}>
              <Text style={styles.name}>HACOM - HAI BÀ TRƯNG</Text>
              <View style={styles.cnt}>
                <EvilIcons name="location" size={20} color="black" />
                <Text>Số 129-131 Lê Thanh Nghị - Hai Bà Trưng - Hà Nội</Text>
              </View>
            </View>
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
};

export default ListShowroom;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "#00000080",
    justifyContent: "center",
    alignItems: "center",
  },
  itemShop: {
    padding: 10,
    borderTopWidth: 1,
    borderBlockColor: "#e3e3e3",
  },
  container: {
    width: "95%",
    backgroundColor: "white",
    borderRadius: 12,
    maxHeight: "90%",
  },
  header: {
    width: "100%",
    position: "relative",
  },
  imageShop: {
    width: "100%",
    resizeMode: "cover",
    borderRadius: 12,
  },
  closeBtn: {
    position: "absolute",
    right: 10,
    top: 10,
    zIndex: 9,
    width: 25,
    height: 25,
    backgroundColor: "#fff",
    borderRadius: "50%",
    textAlign: "center",
    lineHeight: 25,
  },
  iconcloseBtn: {
    fontSize: 22,
    color: "#808080",
    textAlign: "center",
    justifyContent: "center",
    lineHeight: 23,
  },
  name: {
    fontSize: 13,
    color: "#000",
    textTransform: "uppercase",
    fontWeight: "bold",
    marginBottom: 5,
  },
  cnt: {
    flexDirection: "row",
    alignItems: "center",
    gap: 5,
  },
  contentShop: {
    height: 400,
  },
});
