import {
  useGetMarketCoursesQuery,
  useGetTagsQuery,
} from '@/app/backend/endpoints/courses';
import Fallback from '@/components/Fallback';
import { Button } from '@/components/ui/button';
import CourseCard from '@/pages/Main/Home/components/CourseCard';
import { useState } from 'react';

const Market = () => {
  const { data: coursesData, isLoading } = useGetMarketCoursesQuery();
  const courses = coursesData?.data;
  const [selectedCategory, setSelectedCategory] = useState('All');
  const { data: categoriesData } = useGetTagsQuery();
  const categories = categoriesData?.data ?? [];
  const filtredCourses = courses?.filter((course) => {
    return (
      selectedCategory === 'All' || course.tags?.includes(selectedCategory)
    );
  });
  if (isLoading) {
    return <Fallback />;
  }
  return (
    <section className="space-y-7">
      <span className="text-slate-700 text-[26px] font-semibold">Market</span>
      <div className="flex flex-wrap gap-1">
        <Button
          variant={selectedCategory === 'All' ? 'category' : 'ghost'}
          className="w-fit text-category font-semibold hover:text-cyan-700"
          onClick={() => setSelectedCategory('All')}
        >
          All
        </Button>
        {categories.map((category, index) => (
          <div key={index}>
            <Button
              variant={selectedCategory === category ? 'category' : 'ghost'}
              className="w-fit text-category font-semibold hover:text-cyan-700"
              onClick={() => setSelectedCategory(category)}
            >
              {category.charAt(0).toUpperCase() + category.slice(1)}
            </Button>
          </div>
        ))}
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-8">
        {filtredCourses?.map(
          (course) =>
            (
              <div key={course.course_id}>
                <CourseCard course={course} openInNewTab/>
              </div>
            ) ?? <p>No courses found</p>
        )}
      </div>
    </section>
  );
};

export default Market;