import CommunityImage from '@/assets/img/community-collboration.jpg'
import { defaultFetcher } from '@/helpers/fetch.helper'
import { APP_BASE_URL } from '@/utils/constants'
import Image from 'next/image'
import useSWR from 'swr'

const CommunitySection = () => {

  const {data : AuthorCount} = useSWR(APP_BASE_URL+'/api/public/stats/total-authors' , defaultFetcher);
  const { data : TotalCourses } = useSWR(APP_BASE_URL + '/api/public/stats/total-courses' , defaultFetcher)

  console.log(AuthorCount , TotalCourses)
  return(
    <div className="bg-gray-50 border-t">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl font-bold mb-6 text-purple-700">Join Our Growing Community</h2>
            <p className="text-gray-600 mb-8">
              Connect with fellow researchers, educators, and learners. Share your knowledge, collaborate on courses, and participate in meaningful discussions.
            </p>
            <div className="grid grid-cols-2 gap-4 text-center">
              <div className="bg-white p-4 rounded-lg shadow-sm border border-purple-700">
                <p className="text-2xl font-bold text-purple-600">{AuthorCount?.totalAuthors}+</p>
                <p className="text-gray-600">Expert Contributors</p>
              </div>
              <div className="bg-white p-4 rounded-lg shadow-sm border border-purple-700">
                <p className="text-2xl font-bold text-purple-600">{TotalCourses?.totalCourses}+</p>
                <p className="text-gray-600">Research-Based Courses</p>
              </div>
            </div>
          </div>
          <div className="relative overlay-purple">
            <Image src={CommunityImage} alt="Community collaboration" className="rounded-lg shadow-lg"  />
          </div>
        </div>
      </div>
    </div>
  )
}

export default CommunitySection