import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { defaultFetcher } from "@/helpers/fetch.helper"
import { APP_BASE_URL } from "@/utils/constants"
import Image from "next/image"
import useSWR from "swr"

const EnrolledCourseTabContent : React.FC = () => {
  const  { data } = useSWR(APP_BASE_URL + '/api/course/enrolled' , defaultFetcher);

  return (
    <>
      <Card className='border border-purple-700/20 shadow shadow-purple-700/40'>
        <CardHeader>
            <CardTitle className="text-2xl text-purple-700">Enrolled Courses List </CardTitle>
        </CardHeader>
        <CardContent>
            {
              data?.length && data.map((course : Record<string,any> , index : number) => {
                return(
                  <>
                    <Card
                        key={course.id}
                        className="hover:shadow-lg transition-shadow"
                      >
                      <CardContent className="p-6 flex gap-4">
                        <div >
                          <Image src="https://placehold.jp/400x250.png"alt="placeholder" width={400} height={250} className="w-[400] h-auto rounded-2xl"/>
                        </div>
                        <div>
                          <div className="flex items-start justify-between">
                            <div className="space-y-2">
                              <h3 className="text-xl font-semibold text-purple-700">
                                {course.title}
                              </h3>
                              <p className="text-gray-600">{course.description}</p>
                            </div>
                          </div>
          
                          <div className="mt-4 flex flex-wrap gap-4 text-sm text-gray-500">
                            <span className="flex items-center">
                              <span className="font-medium">Published:</span>
                              <span className="ml-1">{course.publishedDate}</span>
                            </span>
                            <span className="flex items-center">
                              <span className="font-medium">Enrolled:</span>
                              <span className="ml-1">
                                {course.enrolledStudent} students
                              </span>
                            </span>
                            <span className="flex items-center">
                              <span className="font-medium">Active Discussions:</span>
                              <span className="ml-1">
                                {course.activeDiscussionCount}
                              </span>
                            </span>
                            <span className="flex items-center">
                              <span className="font-medium">Published by:</span>
                              <span className="ml-1">{course.publishedBy}</span>
                            </span>
                          </div>
                        </div>
                        </CardContent>
                      </Card>
                  </>
                )
              })
            }
        </CardContent>
      </Card>
    </>
  )
}

export default EnrolledCourseTabContent