import { useNavigate } from '@remix-run/react';

interface CategoryItem {
  name: string;
  icon: string;
  count: number;
}

interface QuickCategoriesProps {
  categories: CategoryItem[];
  onCategoryClick?: (category: string) => void;
}

export function QuickCategories({ categories, onCategoryClick }: QuickCategoriesProps) {
  const navigate = useNavigate();

  const handleCategoryClick = (category: CategoryItem) => {
    if (onCategoryClick) {
      onCategoryClick(category.name);
    } else {
      // 默认导航到合同列表页面并筛选分类
      navigate(`/contract-template/list?category=${encodeURIComponent(category.name)}`);
    }
  };

  return (
    <div className="quick-categories">
      {categories.map((category) => (
        <div 
          key={category.name}
          className="category-card" 
          onClick={() => handleCategoryClick(category)}
          role="button"
          tabIndex={0}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              handleCategoryClick(category);
            }
          }}
          aria-label={`选择${category.name}分类，共${category.count}个模板`}
        >
          <div className="category-icon">
            <i className={category.icon}></i>
          </div>
          <div className="category-title">{category.name}</div>
          <div className="category-count">{category.count}个模板</div>
        </div>
      ))}
    </div>
  );
} 