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

interface CategoryButtonProps {
  title: string;
  isSelected?: boolean;
}

const CategoryButton: React.FC<CategoryButtonProps> = ({
  title,
  isSelected = false,
}) => {
  return (
    <View
      style={[styles.categoryButton, isSelected && styles.selectedCategory]}
    >
      <Text
        style={[styles.categoryText, isSelected && styles.selectedCategoryText]}
      >
        {title}
      </Text>
    </View>
  );
};

export default function CategoryFilters() {
  const categories = [
    { title: "Máy tính xách tay", selected: true },
    { title: "Màn hình", selected: false },
    { title: "Macbook", selected: false },
    { title: "PC", selected: false },
    { title: "Cài phần mềm", selected: false },
    { title: "Máy in", selected: false },
    { title: "Điện thoại di động", selected: false },
    { title: "Máy photocopy", selected: false },
    { title: "Máy chiếu", selected: false },
    { title: "Ổ cứng", selected: false },
    { title: "Nâng cấp", selected: false },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tìm theo nhu cầu</Text>
      <View style={styles.secondRow}>
        {categories.map((item) => (
          <CategoryButton title={item.title} isSelected={item.selected} />
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "rgba(240, 240, 240, 1)",
    paddingTop: 13,
    paddingHorizontal: 14,
    paddingBottom: 24,
    marginTop: 12,
  },
  title: {
    fontSize: 20,
    fontWeight: "700",
    color: "rgba(0, 0, 0, 1)",
    textAlign: "center",
  },
  firstRow: {
    flexDirection: "row",
    gap: 8,
    marginTop: 12,
    marginHorizontal: 20,
  },
  secondRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 5,
    marginTop: 12,
  },
  leftColumn: {
    flex: 1,
  },
  rightColumn: {
    flex: 1,
  },
  row: {
    flexDirection: "row",
    gap: 8,
    marginBottom: 12,
  },
  categoryButton: {
    borderRadius: 23,
    borderWidth: 1,
    borderColor: "rgba(227, 227, 227, 1)",
    paddingVertical: 5,
    paddingHorizontal: 9,
    alignItems: "center",
    justifyContent: "center",
    minHeight: 24,
  },
  selectedCategory: {
    backgroundColor: "#F6F3FF",
    borderColor: "#462F91",
  },
  categoryText: {
    fontSize: 13,
    fontWeight: "400",
    color: "rgba(89, 89, 89, 1)",
    textAlign: "center",
    lineHeight: 23,
  },
  selectedCategoryText: {
    color: "#462F91",
  },
});
