"use client";
/*
 * Documentation:
 * Progress Circle — https://app.subframe.com/f023064a5ca0/library?component=Progress+Circle_91a72105-500a-46e2-997b-7e8cd29b5f81
 */

import React from "react";
import { FeatherAlertTriangle } from "@subframe/core";
import { FeatherCheck } from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface ProgressCircleRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  state?: "default" | "uploading" | "success" | "error";
  value?: number;
  statusText?: React.ReactNode;
  className?: string;
}

const ProgressCircleRoot = React.forwardRef<
  HTMLDivElement,
  ProgressCircleRootProps
>(function ProgressCircleRoot(
  {
    state = "default",
    value = 30,
    statusText,
    className,
    ...otherProps
  }: ProgressCircleRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/91a72105 flex h-14 w-14 items-center justify-center rounded-[9999px] border-2 border-solid border-border-default group/mtpcircle relative",
        {
          "border-2 border-solid border-border-negative-solid":
            state === "error",
          "border-2 border-solid border-border-positive-solid":
            state === "success",
          "border-2 border-solid border-brand-solid-default":
            state === "uploading",
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {statusText ? (
        <div
          className={SubframeUtils.twClassNames(
            "flex items-center justify-center",
            { hidden: state === "error" || state === "success" }
          )}
        >
          {statusText}
        </div>
      ) : null}
      <FeatherCheck
        className={SubframeUtils.twClassNames(
          "hidden font-['Instrument_Sans'] text-[24px] font-[500] leading-[24px] text-icon-feedback-positive",
          { "inline-flex": state === "success" }
        )}
      />
      <FeatherAlertTriangle
        className={SubframeUtils.twClassNames(
          "hidden font-['Instrument_Sans'] text-[24px] font-[500] leading-[24px] text-icon-feedback-negative",
          { "inline-flex": state === "error" }
        )}
      />
    </div>
  );
});

export const ProgressCircle = ProgressCircleRoot;