doctor-mail/apps/web/src/components/models/course/card/CourseStats.tsx

import { StarIcon, ChartBarIcon, ClockIcon } from '@heroicons/react/24/solid';

interface CourseStatsProps {
    averageRating?: number;
    numberOfReviews?: number;
    completionRate?: number;
    totalDuration?: number;
}

export const CourseStats = ({
    averageRating,
    numberOfReviews,
    completionRate,
    totalDuration,
}: CourseStatsProps) => {
    return (
        <div className="grid grid-cols-2 gap-4 p-6 bg-gray-50 ">
            {averageRating !== undefined && (
                <div className="flex items-center gap-2">
                    <StarIcon className="h-5 w-5 text-yellow-400" />
                    <div>
                        <div className="font-semibold text-gray-900 ">
                            {averageRating.toFixed(1)}
                        </div>
                        <div className="text-xs text-gray-500 ">
                            {numberOfReviews} reviews
                        </div>
                    </div>
                </div>
            )}
            {completionRate !== undefined && (
                <div className="flex items-center gap-2">
                    <ChartBarIcon className="h-5 w-5 text-green-500" />
                    <div>
                        <div className="font-semibold text-gray-900 ">
                            {completionRate}%
                        </div>
                        <div className="text-xs text-gray-500 ">
                            Completion
                        </div>
                    </div>
                </div>
            )}
            {totalDuration !== undefined && (
                <div className="flex items-center gap-2">
                    <ClockIcon className="h-5 w-5 text-blue-500" />
                    <div>
                        <div className="font-semibold text-gray-900 ">
                            {Math.floor(totalDuration / 60)}h {totalDuration % 60}m
                        </div>
                        <div className="text-xs text-gray-500 ">
                            Duration
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};