import { forwardRef } from "react";

/**
 * Progress
 *
 * variant:    "secondary" | "accent" | "info" | "success" | "warning" | "danger" | "neutral" | (default)
 * value:      number - 0–100; omit for indeterminate state
 * max:        number (default: 100)
 * label:      string | ReactNode - label above the bar
 * valueLabel: string | ReactNode - label below the bar
 * id:         string - ties label[for] to progress[id]
 */
export const Progress = forwardRef(function Progress(
  { variant, value, max = 100, label, valueLabel, id, className = "", ...props },
  ref
) {
  const classes = [
    "prs-progress",
    variant && variant !== "default" && `prs-progress-${variant}`,
    className,
  ]
    .filter(Boolean)
    .join(" ");

  const indeterminate = value === undefined || value === null;

  return (
    <div className="prs-progress-label">
      {label && <label htmlFor={id}>{label}</label>}
      <progress
        ref={ref}
        id={id}
        className={classes}
        {...(indeterminate ? { "aria-label": "Content loading..." } : { value, max })}
        {...props}
      >
        {!indeterminate && `${value}%`}
      </progress>
      {valueLabel && !indeterminate && <label htmlFor={id}>{valueLabel}</label>}
    </div>
  );
});

/**
 * ProgressRadial
 *
 * variant: same color variants as Progress
 * value:   number - 0–100 (default: 0)
 */
export const ProgressRadial = forwardRef(function ProgressRadial(
  { variant, value = 0, className = "", children, ...props },
  ref
) {
  const classes = [
    "prs-progress-radial",
    variant && variant !== "default" && `prs-progress-${variant}`,
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div
      ref={ref}
      className={classes}
      style={{ "--value": value }}
      role="progressbar"
      aria-valuenow={value}
      {...props}
    >
      {children ?? `${value}%`}
    </div>
  );
});