"use client";

import _JSXStyle from "../styled-jsx.es.js";
import React, { forwardRef, useId } from "react";
import { motion } from "framer-motion";
import { useCircularProgress } from "./useCircularProgress";
var statusColors = {
  "default": "#3b82f6",
  success: "#10b981",
  warning: "#f59e0b",
  error: "#ef4444"
};
var CircularProgress = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? 140 : _ref$size,
    _ref$strokeWidth = _ref.strokeWidth,
    strokeWidth = _ref$strokeWidth === void 0 ? 12 : _ref$strokeWidth,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? 0 : _ref$value,
    _ref$min = _ref.min,
    min = _ref$min === void 0 ? 0 : _ref$min,
    _ref$max = _ref.max,
    max = _ref$max === void 0 ? 100 : _ref$max,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? "determinate" : _ref$variant,
    _ref$status = _ref.status,
    status = _ref$status === void 0 ? "default" : _ref$status,
    _ref$gradient = _ref.gradient,
    gradient = _ref$gradient === void 0 ? true : _ref$gradient,
    _ref$showPercentage = _ref.showPercentage,
    showPercentage = _ref$showPercentage === void 0 ? true : _ref$showPercentage,
    label = _ref.label;
  var _useCircularProgress = useCircularProgress({
      value: value,
      min: min,
      max: max,
      variant: variant
    }),
    percentage = _useCircularProgress.percentage,
    displayValue = _useCircularProgress.displayValue;
  var radius = (size - strokeWidth) / 2;
  var circumference = 2 * Math.PI * radius;
  var strokeDashoffset = circumference - percentage / 100 * circumference;
  var baseColor = statusColors[status];

  // SSR-SAFE ID
  var gradientId = useId();
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    role: "progressbar",
    "aria-valuemin": min,
    "aria-valuemax": max,
    "aria-valuenow": variant === "determinate" ? value : undefined,
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]) + " " + "wrapper"
  }, /*#__PURE__*/React.createElement("svg", {
    width: size,
    height: size,
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
  }, gradient && /*#__PURE__*/React.createElement("defs", {
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
  }, /*#__PURE__*/React.createElement("linearGradient", {
    id: gradientId,
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
  }, /*#__PURE__*/React.createElement("stop", {
    offset: "0%",
    stopColor: baseColor,
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
  }), /*#__PURE__*/React.createElement("stop", {
    offset: "100%",
    stopColor: "#9333ea",
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
  }))), /*#__PURE__*/React.createElement("circle", {
    stroke: "#e5e7eb",
    fill: "none",
    strokeWidth: strokeWidth,
    r: radius,
    cx: size / 2,
    cy: size / 2,
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]])
  }), /*#__PURE__*/React.createElement(motion.circle, {
    fill: "none",
    stroke: gradient ? "url(#".concat(gradientId, ")") : baseColor,
    strokeWidth: strokeWidth,
    strokeLinecap: "round",
    strokeDasharray: circumference,
    r: radius,
    cx: size / 2,
    cy: size / 2,
    initial: false,
    animate: {
      strokeDashoffset: variant === "determinate" ? strokeDashoffset : circumference * 0.4,
      rotate: variant === "indeterminate" ? 360 : 0
    },
    transition: variant === "indeterminate" ? {
      repeat: Infinity,
      duration: 1.2,
      ease: "linear"
    } : {
      duration: 0.6,
      ease: "easeOut"
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["4042284457", [size * 0.18]]]) + " " + "label"
  }, label !== null && label !== void 0 ? label : showPercentage && variant === "determinate" ? "".concat(Math.round(displayValue), "%") : null), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4042284457",
    dynamic: [size * 0.18]
  }, ".wrapper.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}svg.__jsx-style-dynamic-selector{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.label.__jsx-style-dynamic-selector{position:absolute;font-weight:700;font-size:".concat(size * 0.18, "px;}")));
});
CircularProgress.displayName = "CircularProgress";
export default CircularProgress;