"use client"

import type { JSX } from "react"
import { useTranslations } from "next-intl"

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): JSX.Element {
  const t = useTranslations("coursePlans")
  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">{t("progress.label")}</span>
        <span className="text-muted-foreground">
          {t("progress.hours", { completed: completedHours, total: totalHours, percent: hoursPercent })}
        </span>
      </div>
      <Progress value={hoursPercent} className="h-2" aria-valuenow={hoursPercent} aria-valuemin={0} aria-valuemax={100} />
      {showDetails && typeof completedItems === "number" && typeof totalItems === "number" ? (
        <p className="text-xs text-muted-foreground">
          {t("progress.weekPlansCompleted", { completed: completedItems, total: totalItems })}
        </p>
      ) : null}
    </div>
  )
}
