import React, { useState } from 'react';

interface Category {
  id: number;
  name: string;
  children?: Category[];
}

export default function CategoryTree() {
  const [categories] = useState<Category[]>([
    {
      id: 1,
      name: 'Electronics',
      children: [
        { id: 11, name: 'Computers' },
        { id: 12, name: 'Audio', children: [{ id: 121, name: 'Headphones' }, { id: 122, name: 'Speakers' }] },
      ],
    },
    {
      id: 2,
      name: 'Clothing',
      children: [
        { id: 21, name: "Men's" },
        { id: 22, name: "Women's" },
      ],
    },
  ]);

  const TreeNode = ({ cat, level = 0 }: { cat: Category; level?: number }) => (
    <div style={{ marginLeft: `${level * 1.5}rem` }}>
      <div style={{ ...styles.categoryItem, backgroundColor: level === 0 ? '#374151' : '#1f2937' }}>
        <span style={styles.categoryName}>{cat.name}</span>
        <span style={styles.categoryId}>#{cat.id}</span>
      </div>
      {cat.children?.map(child => <TreeNode key={child.id} cat={child} level={level + 1} />)}
    </div>
  );

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Category Tree</h1>
      <div style={styles.treeContainer}>
        {categories.map(cat => <TreeNode key={cat.id} cat={cat} />)}
      </div>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    padding: '2rem',
    backgroundColor: '#111827',
    minHeight: '100vh',
    color: '#f9fafb',
    fontFamily: 'system-ui, -apple-system, sans-serif',
  },
  title: {
    fontSize: '2rem',
    fontWeight: 'bold',
    marginBottom: '2rem',
    color: '#f9fafb',
  },
  treeContainer: {
    backgroundColor: '#1f2937',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid #374151',
  },
  categoryItem: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '0.75rem 1rem',
    marginBottom: '0.5rem',
    borderRadius: '0.375rem',
    border: '1px solid #374151',
  },
  categoryName: {
    fontWeight: '500',
    color: '#f9fafb',
  },
  categoryId: {
    fontSize: '0.875rem',
    color: '#9ca3af',
  },
};
