import { Link } from 'react-router-dom';
import { useI18n } from '../hooks/useI18n';
import { siteData } from '../data/siteData';
import { getIcon } from '../utils/iconRegistry';

export default function CategoryGrid() {
  const { bi } = useI18n();

  return (
    <div className="category-grid">
      {siteData.categories.map((cat) => {
        const IconComponent = getIcon(cat.icon);
        return (
          <Link key={cat.id} to={`/projects?cat=${cat.id}`} className="category-card">
            <div className="category-icon">{IconComponent && <IconComponent size={28} />}</div>
            <div className="category-label">{bi(cat.label)}</div>
          </Link>
        );
      })}
    </div>
  );
}
