import { cn } from "@/lib/utils";

interface RadialStepperProps {
  current: number;
  total: number;
  size?: number;
  strokeWidth?: number;
  label?: string;
  stepName?: string;
  description?: string;
  className?: string;
}

export function RadialStepper({
  current,
  total,
  size = 48,
  strokeWidth = 4,
  label = "من",
  stepName,
  description,
  className,
}: RadialStepperProps) {
  const progress = Math.min(Math.max((current / total) * 100, 0), 100);
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (progress / 100) * circumference;

  return (
    <div className={cn("flex items-center gap-4", className)}>
      {/* Text labels */}
      <div className="flex flex-col  gap-1">
        {stepName && (
          <p className="text-sm font-semibold text-foreground">{stepName}</p>
        )}
        {description && (
          <p className="text-xs text-muted-foreground">{description}</p>
        )}
      </div>

      {/* Circular progress indicator */}
      <div className="relative inline-flex items-center justify-center">
        <svg
          width={size}
          height={size}
          viewBox={`0 0 ${size} ${size}`}
          className="-rotate-90"
          role="progressbar"
          aria-valuenow={current}
          aria-valuemin={0}
          aria-valuemax={total}
          aria-label={`${current} ${label} ${total}`}
        >
          {/* Background circle */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            className="stroke-border"
            strokeWidth={strokeWidth}
          />
          {/* Progress circle */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            className="stroke-primary transition-all duration-300 ease-in-out"
            strokeWidth={strokeWidth}
            strokeDasharray={circumference}
            strokeDashoffset={offset}
            strokeLinecap="round"
          />
        </svg>
        {/* Center text */}
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-[10.5px] font-bold text-muted-foreground">
            {current} {label} {total}
          </span>
        </div>
      </div>
    </div>
  );
}