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

const specs = [
  { key: "Manufacturer", value: "AMD" },
  {
    key: "Part #",
    value: ["100-1000001084WOF", "AMD Ryzen 7 9800X3D", "100-100001084WOF"],
  },
  { key: "Series", value: "AMD Ryzen 7" },
  { key: "Microarchitecture", value: "Zen 5" },
  { key: "Core Family", value: "Granite Ridge" },
  { key: "Socket", value: "AM5" },
  { key: "Core", value: "8" },
  { key: "Thread Count", value: "16" },
  { key: "Performance Core Clock", value: "4.7 GHz" },
  { key: "Performance Core Boost Clock", value: "5.2 GHz" },
  { key: "L2 Cache", value: "8 MB" },
  { key: "L3 Cache", value: "96 MB" },
  { key: "TDP", value: "120 W" },
  { key: "Integrated Graphics", value: "Radeon" },
];

export default function ProductSpecs() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Thông số kỹ thuật</Text>
      <FlatList
        data={specs}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <View
            style={[styles.item, index < specs.length - 1 && styles.itemBorder]}
          >
            <Text style={styles.label}>{item.key}</Text>
            {Array.isArray(item.value) ? (
              <View style={styles.list}>
                {item.value.map((v, i) => (
                  <Text key={i} style={styles.value}>
                    {v}
                  </Text>
                ))}
              </View>
            ) : (
              <Text style={styles.value}>{item.value}</Text>
            )}
          </View>
        )}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    padding: 12,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderColor: "#ababab",
  },
  item: {
    paddingVertical: 10,
  },
  itemBorder: {
    borderBottomWidth: 1,
    borderColor: "#e5e5e5",
  },
  label: {
    fontWeight: "bold",
    marginBottom: 4,
    fontSize: 14,
  },
  value: {
    fontSize: 14,
    color: "#444",
  },
  list: {
    gap: 2,
  },
});
