import { useState, useEffect } from 'react';

interface Product {
  id: number;
  name: string;
  description: string;
  price: string;
  active: boolean;
}

export default function ProductCatalog() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const mockProducts: Product[] = [
      { id: 1, name: 'Basic Consultation', description: '30-minute consultation session', price: '$50.00', active: true },
      { id: 2, name: 'Extended Session', description: '60-minute extended consultation', price: '$100.00', active: true },
      { id: 3, name: 'Package Deal', description: '5 sessions bundle', price: '$400.00', active: false },
    ];
    setProducts(mockProducts);
    setLoading(false);
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-blue-400">Product Catalog</h1>
          <button className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium">
            + New Product
          </button>
        </div>

        {loading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mx-auto"></div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {products.map((product) => (
              <div key={product.id} className="bg-gray-800 rounded-lg p-6 hover:bg-gray-750 transition">
                <div className="flex justify-between items-start mb-4">
                  <h3 className="text-xl font-semibold">{product.name}</h3>
                  <span className={`px-2 py-1 rounded-full text-xs ${product.active ? 'bg-green-900 text-green-200' : 'bg-gray-700 text-gray-400'}`}>
                    {product.active ? 'Active' : 'Inactive'}
                  </span>
                </div>
                <p className="text-gray-400 mb-4">{product.description}</p>
                <div className="flex justify-between items-center">
                  <span className="text-2xl font-bold text-blue-400">{product.price}</span>
                  <div className="space-x-2">
                    <button className="text-blue-400 hover:text-blue-300 text-sm">Edit</button>
                    <button className="text-red-400 hover:text-red-300 text-sm">Delete</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
