import { useTutorialStore } from '@stores/tutorialStore'

export function ProgressBar() {
  const { getProgress, config, completedSteps } = useTutorialStore()
  const progress = getProgress()

  if (!config) return null

  const total = config.steps.length
  const completed = Math.min(completedSteps?.length ?? 0, total)

  return (
    <div className="w-full flex flex-col gap-2">
      {/* 进度信息 - info */}
      <div className="flex items-center justify-between">
        <span className="text-xs font-medium text-[var(--color-text-secondary)]">学习进度</span>
        <div className="flex items-center gap-2">
          <span className="text-xs text-[var(--color-text-muted)] font-mono">
            {completed} / {total}
          </span>
          <span className="text-xs font-semibold text-[var(--color-primary-solid)] font-mono">
            {progress}%
          </span>
        </div>
      </div>

      {/* 进度条 - track */}
      <div className="h-[6px] rounded-[3px] bg-[var(--color-bg-card)] overflow-hidden">
        <div
          className="h-full rounded-[3px] bg-[var(--color-primary-solid)] transition-all duration-500 ease-out"
          style={{ width: `${progress}%` }}
        />
      </div>
    </div>
  )
}