"use client"

import { Progress } from "@/shared/components/ui/progress"

interface CoursePlanProgressProps {
  completedHours: number
  totalHours: number
  completedItems?: number
  totalItems?: number
  showDetails?: boolean
}

export function CoursePlanProgress({
  completedHours,
  totalHours,
  completedItems,
  totalItems,
  showDetails = true,
}: CoursePlanProgressProps) {
  const hoursPercent = totalHours > 0 ? Math.round((completedHours / totalHours) * 100) : 0

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">Progress</span>
        <span className="text-muted-foreground">
          {completedHours} / {totalHours} hours ({hoursPercent}%)
        </span>
      </div>
      <Progress value={hoursPercent} className="h-2" />
      {showDetails && typeof completedItems === "number" && typeof totalItems === "number" ? (
        <p className="text-xs text-muted-foreground">
          {completedItems} of {totalItems} week plans completed
        </p>
      ) : null}
    </div>
  )
}