interface ProgressBarProps {
  current: number;
  total: number;
  variant?: "classmaker" | "modern";
}

export default function ProgressBar({ current, total, variant = "classmaker" }: ProgressBarProps) {
  const percentage = total > 0 ? (current / total) * 100 : 0;

  if (variant === "classmaker") {
    return (
      <div className="flex items-center gap-3">
        <div className="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
          <div
            className="h-full bg-blue-500 rounded-full transition-all duration-300"
            style={{ width: `${percentage}%` }}
          />
        </div>
        <span className="text-sm text-gray-500 whitespace-nowrap">
          {current} / {total}
        </span>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-3">
      <div className="w-32 h-2 bg-white/20 rounded-full overflow-hidden">
        <div
          className="h-full bg-white rounded-full transition-all duration-300"
          style={{ width: `${percentage}%` }}
        />
      </div>
      <span className="text-sm text-white/80 whitespace-nowrap">
        {current} / {total}
      </span>
    </div>
  );
}