bestpc_mobile/src/components/shop/ListReview.tsx

import React, { useState } from "react";
import {
  Modal,
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Image,
  Pressable,
  FlatList,
  ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import FontAwesome5 from "@expo/vector-icons/FontAwesome5";

const reviews = [
  {
    id: "1",
    name: "Dino",
    time: "10:00pm 20/02/2025",
    title: "Laptop Gaming Asus ROG 16GB",
    content:
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
    images: [
      require("../../../assets/images/small-product-detail.png"),
      require("../../../assets/images/small-product-detail.png"),
      require("../../../assets/images/small-product-detail.png"),
    ],
    star: 5,
  },
  {
    id: "2",
    name: "Dino",
    time: "10:00pm 20/02/2025",
    title: "Laptop Gaming Asus ROG 16GB",
    content:
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
    images: [
      require("../../../assets/images/small-product-detail.png"),
      require("../../../assets/images/small-product-detail.png"),
    ],
    star: 4,
  },
];

const renderStars = (count: number) => {
  return (
    <View style={{ flexDirection: "row" }}>
      {Array.from({ length: 5 }).map((_, index) => (
        <Ionicons
          key={index}
          name="star"
          size={16}
          color={index < count ? "#ff7a00" : "#d9d9d9"}
        />
      ))}
    </View>
  );
};

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

const ListReview = ({ visible, onClose }: Props) => {
  return (
    <Modal visible={visible} animationType="fade" transparent>
      <View style={styles.overlay}>
        <View style={styles.container}>
          {/* Title */}
          <View style={styles.header}>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Text style={styles.headerText}>Đánh giá sản phẩm</Text>
              <Text style={styles.headerNote}>(102 đánh giá)</Text>
            </View>

            <TouchableOpacity onPress={onClose}>
              <Text style={styles.closeBtn}>
                <FontAwesome5 name="times" size={20} color="black" />
              </Text>
            </TouchableOpacity>
          </View>
          <ScrollView>
            <View>
              <FlatList
                data={reviews}
                keyExtractor={(item) => item.id}
                renderItem={({ item }) => (
                  <View style={styles.reviewItem}>
                    <View style={styles.avatarBox}>
                      <Image
                        source={require("../../../assets/images/avartar-review-1.png")}
                        style={styles.avatar}
                      />
                      <View>
                        <View
                          style={{ flexDirection: "row", alignItems: "center" }}
                        >
                          <Text style={styles.name}>{item.name}</Text>
                          <Text style={styles.time}>{item.time}</Text>
                        </View>
                        <Text style={styles.star}>
                          {renderStars(item.star)}
                        </Text>
                      </View>
                    </View>

                    <View style={styles.reviewContent}>
                      <Text style={styles.title}>{item.title}</Text>
                      <Text style={styles.contentText}>{item.content}</Text>
                      <View style={styles.imageList}>
                        {item.images.map((img, index) => (
                          <Image
                            key={index}
                            source={img}
                            style={styles.reviewImage}
                          />
                        ))}
                      </View>
                      <View style={styles.btnRow}>
                        <TouchableOpacity>
                          <Text style={styles.btnLink}>
                            Bình luận <Text style={styles.black}>(23)</Text>
                          </Text>
                        </TouchableOpacity>
                        <TouchableOpacity>
                          <Text style={styles.btnLink}>
                            Thích <Text style={styles.black}>(23)</Text>
                          </Text>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                )}
              />
            </View>
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
};

export default ListReview;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "#00000080",
    justifyContent: "center",
    alignItems: "center",
  },
  container: {
    width: "95%",
    backgroundColor: "white",
    borderRadius: 12,
    padding: 15,
    maxHeight: "90%",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    borderBottomWidth: 1,
    borderColor: "#E4E4E4",
    paddingBottom: 15,
  },
  headerText: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    flex: 1,
  },
  closeBtn: {
    fontSize: 22,
    color: "#808080",
  },
  headerNote: {
    paddingLeft: 5,
    fontWeight: 400,
  },
  reviewItem: {
    marginTop: 10,
    paddingTop: 10,
    paddingBottom: 10,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: "rgba(228, 228, 228, 1)",
  },
  avatarBox: {
    flexDirection: "row",
    alignContent: "center",
    width: "100%",
    alignItems: "center",
    marginRight: 20,
  },
  avatar: {
    width: 30,
    height: 30,
    borderRadius: 40,
    marginRight: 10,
  },
  name: {
    fontWeight: "bold",
    marginRight: 10,
  },
  time: {
    fontSize: 12,
    textAlign: "center",
  },
  reviewContent: {
    flex: 1,
  },
  title: {
    fontWeight: "600",
    marginBottom: 5,
  },
  contentText: {
    marginBottom: 5,
  },
  imageList: {
    flexDirection: "row",
    marginBottom: 10,
  },
  reviewImage: {
    width: 80,
    height: 80,
    marginRight: 10,
  },
  btnRow: {
    flexDirection: "row",
  },
  btnLink: {
    color: "#1877F2",
    marginRight: 15,
  },
  star: {
    fontSize: 16,
  },
  black: {
    color: "#000",
  },
});