import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { UtensilsCrossed, Hotel, ShoppingBag, Music, Wrench, Building } from 'lucide-react';

const categories = [
  { id: 1, name: 'Restaurantes', icon: UtensilsCrossed, count: 145, color: 'bg-orange-100 text-orange-600' },
  { id: 2, name: 'Hoteles', icon: Hotel, count: 67, color: 'bg-blue-100 text-blue-600' },
  { id: 3, name: 'Tiendas', icon: ShoppingBag, count: 234, color: 'bg-purple-100 text-purple-600' },
  { id: 4, name: 'Entretenimiento', icon: Music, count: 89, color: 'bg-pink-100 text-pink-600' },
  { id: 5, name: 'Servicios', icon: Wrench, count: 156, color: 'bg-green-100 text-green-600' },
  { id: 6, name: 'Otros', icon: Building, count: 78, color: 'bg-gray-100 text-gray-600' }
];

const BusinessCategories = () => {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {categories.map((category) => {
          const Icon = category.icon;
          return (
            <Card key={category.id} className="hover:shadow-lg transition-shadow cursor-pointer">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className={`w-12 h-12 rounded-lg ${category.color} flex items-center justify-center`}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <CardTitle className="text-lg">{category.name}</CardTitle>
                  </div>
                  <Badge variant="secondary">{category.count}</Badge>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-600">
                  {category.count} establecimientos registrados en esta categoría
                </p>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
};

export default BusinessCategories;
