import { Card, CardContent } from "@/components/ui/card"
import { CourseData } from "@/helpers/apiSchema/course.schema"
import { BookOpen, Clock, MessageSquare, Users } from "lucide-react"


const CourseDetailStats :React.FC<{courseData : Record<string,any>}> = ({courseData}) => {
  return(
    <>
      <div className="mx-auto container py-8">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <Card>
                        <CardContent className="p-4 flex items-center space-x-4">
                            <Clock className="h-8 w-8 text-blue-500" />
                            <div>
                                <div className="text-sm text-gray-500">Duration</div>
                                <div className="font-semibold">{courseData?.duration ?? 0}</div>
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardContent className="p-4 flex items-center space-x-4">
                            <Users className="h-8 w-8 text-green-500" />
                            <div>
                                <div className="text-sm text-gray-500">Enrolled</div>
                                <div className="font-semibold">{courseData?.enrollmentSummary?.courseData ?? 0} students</div>
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardContent className="p-4 flex items-center space-x-4">
                            <MessageSquare className="h-8 w-8 text-purple-500" />
                            <div>
                                <div className="text-sm text-gray-500">Reviews</div>
                                <div className="font-semibold">{courseData?.enrollmentSummary?.totalChats ?? 0}</div>
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardContent className="p-4 flex items-center space-x-4">
                            <BookOpen className="h-8 w-8 text-orange-500" />
                            <div>
                                <div className="text-sm text-gray-500">Discussion group member</div>
                                <div className="font-semibold">{courseData?.enrollmentSummary?.usersInChat ?? 0}</div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
    </>
  )
}

export default CourseDetailStats