'use client';

import { category_api } from '@/shared/config/api/category/api';
import { useRouter } from '@/shared/config/i18n/navigation';
import { useQuery } from '@tanstack/react-query';
import { ChevronRight } from 'lucide-react';
import { useParams } from 'next/navigation';

const SubCategory = () => {
  const { categoryId } = useParams();

  const { data: category } = useQuery({
    queryKey: ['category_list'],
    queryFn: () => category_api.getCategory({ page: 1, page_size: 99 }),
    select(data) {
      return data.data;
    },
  });

  const router = useRouter();
  const categorys = category?.find((cat) => cat.id === Number(categoryId));

  const handleSubCategoryClick = (subCategory: {
    name: string;
    id: number;
  }) => {
    router.push(`/category/${categoryId}/${subCategory.id}`);
  };

  return (
    <div className="custom-container">
      <>
        <h1 className="text-2xl font-semibold text-gray-900 mb-6">
          {categorys?.name}
        </h1>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {categorys?.product_types.map((subCategory, index) => (
            <button
              key={index}
              onClick={() => handleSubCategoryClick(subCategory)}
              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">
                {subCategory.name}
              </span>
              <ChevronRight className="w-5 h-5 text-gray-400" />
            </button>
          ))}
        </div>
      </>
    </div>
  );
};

export default SubCategory;