'use client';
import CategoryImage from '@/assets/water-bottle.png';
import { category_api } from '@/shared/config/api/category/api';
import { BASE_URL } from '@/shared/config/api/URLs';
import { Link } from '@/shared/config/i18n/navigation';
import { useQuery } from '@tanstack/react-query';
import { ChevronRight } from 'lucide-react';
import { useTranslations } from 'next-intl';
import Image from 'next/image';

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

  return (
    <div className="custom-container">
      <>
        <h1 className="text-2xl font-semibold text-gray-900 mb-6">
          {t('Kategoriyalar')}
        </h1>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {category &&
            category.map((category, index) => (
              <Link
                key={index}
                href={`/category/${category.id}`}
                className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-between hover:border-gray-300 transition-colors"
              >
                <div className="flex items-center gap-4">
                  <Image
                    src={
                      category.image === null
                        ? CategoryImage
                        : BASE_URL + category.image
                    }
                    alt={category.name}
                    width={70}
                    unoptimized
                    height={70}
                  />
                  <span className="text-gray-900 font-medium">
                    {category.name}
                  </span>
                </div>
                <ChevronRight className="w-5 h-5 text-gray-400" />
              </Link>
            ))}
        </div>
      </>
    </div>
  );
};

export default Category;
