"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Progress } from "@/components/ui/progress";

// 진행률 바 컴포넌트 렌더러
const ProgressBarRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    label = "진행률",
    value = 65,
    max = 100,
    showPercentage = true,
    showValue = true,
    color = "#3b82f6",
    style = {},
  } = config;

  const percentage = Math.round((value / max) * 100);

  return (
    <div className="flex h-full w-full flex-col justify-center p-4" style={style}>
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-gray-700">{label}</span>
          <div className="flex items-center gap-2 text-sm text-gray-600">
            {showValue && (
              <span>
                {value}/{max}
              </span>
            )}
            {showPercentage && <span>({percentage}%)</span>}
          </div>
        </div>
        <Progress
          value={percentage}
          className="h-2"
          style={
            {
              "--progress-background": color,
            } as React.CSSProperties
          }
        />
      </div>
    </div>
  );
};

// 레지스트리에 등록
componentRegistry.register("progress", ProgressBarRenderer);
componentRegistry.register("progress-bar", ProgressBarRenderer);

export { ProgressBarRenderer };