'use client';
import { useRouter } from '@/shared/config/i18n/navigation';
import { categoryList, CategoryType } from '@/widgets/welcome/lib/data';
import { ChevronRight } from 'lucide-react';

const Category = () => {
  const router = useRouter();
  const handleCategoryClick = (category: CategoryType) => {
    router.push(`/category/${category.name}`);
  };

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-2xl font-semibold text-gray-900 mb-6">
          Kategoriyalar
        </h1>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {categoryList.map((category, index) => (
            <button
              key={index}
              onClick={() => handleCategoryClick(category)}
              className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-between hover:border-gray-300 transition-colors"
            >
              <span className="text-gray-900 font-medium">{category.name}</span>
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Category;