import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { ProgressBar } from "@/components/ProgressBar";

export interface ProgressPanelProps {
  phasesComplete: number;
  phasesTotal: number;
  tasksComplete: number;
  tasksTotal: number;
}

export function ProgressPanel({
  phasesComplete,
  phasesTotal,
  tasksComplete,
  tasksTotal,
}: ProgressPanelProps) {
  return (
    <Card>
      <CardHeader>
        <h2 className="text-lg font-semibold">Progress</h2>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <ProgressBar completed={tasksComplete} total={tasksTotal} />
        <div className="flex flex-col gap-1 text-sm text-muted-foreground">
          <span>
            Phases: {phasesComplete}/{phasesTotal} complete
          </span>
          <span>
            Tasks: {tasksComplete}/{tasksTotal} complete
          </span>
        </div>
      </CardContent>
    </Card>
  );
}