import React from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";

const reviews = [
  {
    id: 1,
    name: "Dino",
    avatar: require("../../../assets/images/avartar-review-1.png"),
    time: "10:00pm 20/02/2025",
    content: `Lorem Ipsum is simply dummy text of the printing and typesetting industry...`,
    views: 120,
    comments: 120,
  },
  // Thêm các review khác nếu có
];

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

export default function ReviewList() {
  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.title}>Đánh giá</Text>
      </View>

      {/* List */}
      <FlatList
        style={styles.list}
        data={reviews}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <View style={styles.avatarBox}>
              <Image source={item.avatar} style={styles.avatar} />
              <Text style={styles.name}>{item.name}</Text>
              <Text style={styles.time}>{item.time}</Text>
              {renderStars(4)}
            </View>
            <View style={styles.contentBox}>
              <Text style={styles.content}>{item.content}</Text>
              <View style={styles.stats}>
                <View style={styles.statItem}>
                  <Text style={styles.statNumber}>{item.views}</Text>
                  <Text style={styles.icon}>
                    <Ionicons name="eye-outline" size={20} color="black" />
                  </Text>
                </View>
                <View style={styles.statItem}>
                  <Text style={styles.statNumber}>{item.comments}</Text>
                  <Text style={styles.icon}>
                    <MaterialCommunityIcons
                      name="comment-processing-outline"
                      size={20}
                      color="black"
                    />
                  </Text>
                </View>
              </View>
            </View>
          </View>
        )}
      />
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Xem tất cả bình luận</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    padding: 10,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderColor: "#ababab",
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
  },
  button: {
    backgroundColor: "#2563eb",
    paddingHorizontal: 16,
    paddingVertical: 6,
    borderRadius: 4,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonText: {
    color: "#fff",
    fontWeight: "bold",
  },
  list: {
    marginTop: 12,
  },
  item: {
    marginBottom: 15,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderColor: "#e4e4e4",
  },
  avatarBox: {
    marginBottom: 10,
    alignItems: "center",
    flexDirection: "row",
  },
  avatar: {
    width: 25,
    height: 25,
    borderRadius: 40,
  },
  starBox: {},
  contentBox: {
    flex: 1,
  },
  name: {
    fontWeight: "bold",
    marginLeft: 6,
  },
  time: {
    color: "#747474",
    marginLeft: 6,
    marginRight: 6,
  },
  content: {
    marginBottom: 5,
    color: "#333",
  },
  stats: {
    flexDirection: "row",
    gap: 10,
  },
  statItem: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 10,
  },
  statNumber: {
    marginRight: 5,
    fontWeight: "bold",
  },
  icon: {
    fontSize: 14,
  },
});
