import { CourseDto } from "@nice/common";
import { Card } from "@web/src/components/common/container/Card";
import { CourseHeader } from "./CourseHeader";
import { CourseStats } from "./CourseStats";
import { Popover } from "@web/src/components/presentation/popover";
import { useState } from "react";

interface CourseCardProps {
	course: CourseDto;
	onClick?: () => void;
}

export const CourseCard = ({ course, onClick }: CourseCardProps) => {
	return (
		<Card onClick={onClick} className="w-full max-w-sm">
			<CourseHeader
				title={course.title}
				subTitle={course.subTitle}
				thumbnail={course.thumbnail}
				level={course.level}
				numberOfStudents={course.numberOfStudents}
				publishedAt={course.publishedAt}
			/>
			<CourseStats
				averageRating={course.averageRating}
				numberOfReviews={course.numberOfReviews}
				completionRate={course.completionRate}
				totalDuration={course.totalDuration}
			/>
		</Card>
	);
};