interface SignLanguageProgressPanelProps {
  readonly learnedCount: number;
  readonly totalCount: number;
  readonly progressPercent: number;
  readonly progressErrorMessage: string | null;
}

export function SignLanguageProgressPanel({
  learnedCount,
  totalCount,
  progressPercent,
  progressErrorMessage,
}: SignLanguageProgressPanelProps) {
  return (
    <section className="bg-white rounded-2xl border border-violet-100 shadow-sm p-5">
      <div className="flex items-center justify-between mb-2">
        <h3 className="font-semibold text-gray-800 text-sm">Your Learning Progress</h3>
        <span className="text-sm font-bold text-indigo-600">
          {learnedCount}/{totalCount} signs
        </span>
      </div>
      <div className="h-3 bg-gray-100 rounded-full overflow-hidden">
        <div
          className="h-full bg-gradient-to-r from-indigo-400 to-violet-500 rounded-full transition-all duration-500"
          style={{ width: `${progressPercent}%` }}
        />
      </div>
      {progressErrorMessage && (
        <p className="text-xs text-red-500 mt-2">{progressErrorMessage}</p>
      )}
    </section>
  );
}
