import { Users, Hash, Building } from "lucide-react";

interface CategoryTabsProps {
  selectedCategory: string;
  onCategoryChange: (category: string) => void;
}

const categories = [
  { id: "People", label: "People", Icon: Users, count: 36 },
  { id: "Topics", label: "Topics", Icon: Hash, count: 24 },
  { id: "Companies", label: "Companies", Icon: Building, count: 27 },
];

export default function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) {
  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-40">
      <div className="max-w-4xl mx-auto px-4">
        <nav className="flex justify-around py-2">
          {categories.map((category) => {
            const { Icon } = category;
            const isSelected = selectedCategory === category.id;
            
            return (
              <button
                key={category.id}
                onClick={() => onCategoryChange(category.id)}
                className={`flex flex-col items-center py-2 px-4 rounded-lg transition-colors ${
                  isSelected
                    ? "text-blue-600 dark:text-blue-400"
                    : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                }`}
                data-testid={`tab-${category.id}`}
              >
                <Icon className={`h-6 w-6 mb-1 ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} />
                <span className="text-xs font-medium">{category.label}</span>
              </button>
            );
          })}
        </nav>
      </div>
    </div>
  );
}