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

const MAX_VISIBLE_ROWS = 6;

const specificationData = [
  { label: "Mã sản phẩm", value: "VA3416WC" },
  { label: "Màu sắc", value: "Đen" },
  { label: "Độ sáng", value: "Max 300cd/m²" },
  { label: "Độ tương phản", value: "3000:1" },
  { label: "Màu sắc hiển thị", value: "16.7M" },
  { label: "Màu sắc hỗ trợ", value: "6500K" },
  { label: "Loại màn hình", value: "Cong R1500" },
  { label: "Kích cỡ màn hình", value: '34"' },
  { label: "Tấm nền", value: "VA" },
  { label: "Góc nhìn", value: "89°/89° (H/V)" },
  {
    label: "Tính năng đặc biệt",
    value: `1. Flicker-Free Backlight adjustment\n2. Dynamic Contrast Ratio: DCR\n3. Adaptive Sync\n4. FPS/RTS\n5. PIP/PBP\n6. PQ\n7. GAME PLUS`,
  },
];

const ProductSpecification = () => {
  const [showAll, setShowAll] = useState(false);

  const visibleData = showAll
    ? specificationData
    : specificationData.slice(0, MAX_VISIBLE_ROWS);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Thông tin chi tiết</Text>
      <FlatList
        data={visibleData}
        keyExtractor={(item, index) => `${item.label}-${index}`}
        renderItem={({ item }) => (
          <View style={styles.row}>
            <Text style={styles.label}>{item.label}</Text>
            <Text style={styles.value}>{item.value}</Text>
          </View>
        )}
      />

      {specificationData.length > MAX_VISIBLE_ROWS && (
        <TouchableOpacity
          onPress={() => setShowAll(!showAll)}
          style={styles.toggleButton}
        >
          <Text style={styles.toggleText}>
            {showAll ? "Thu gọn" : "Xem thêm thông số"}{" "}
            <Ionicons
              name={showAll ? "chevron-up-outline" : "chevron-down-outline"}
              size={16}
              color="#FF7A00"
            />
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

export default ProductSpecification;

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    borderRadius: 8,
    padding: 12,
    marginTop: 15,
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 12,
    borderBottomWidth: 1,
    borderColor: "#B1B1B1",
    paddingBottom: 8,
  },
  row: {
    flexDirection: "row",
    marginBottom: 8,
  },
  label: {
    flex: 1,
    fontWeight: "600",
    color: "#333",
  },
  value: {
    flex: 1,
    color: "#555",
  },
  toggleButton: {
    marginTop: 12,
    alignItems: "center",
  },
  toggleText: {
    color: "#FF7A00",
    fontWeight: "600",
    fontSize: 14,
    flexDirection: "row",
  },
});
