"use client";

import React from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TrendingUp, TrendingDown, Minus } from "lucide-react";

// 통계 카드 컴포넌트 렌더러
const StatsCardRenderer: ComponentRenderer = ({ component, ...props }) => {
  const config = component.componentConfig || {};
  const {
    title = "통계 제목",
    value = "1,234",
    change = "+12.5%",
    trend = "up", // up, down, neutral
    description = "전월 대비",
    style = {},
  } = config;

  const getTrendIcon = () => {
    switch (trend) {
      case "up":
        return <TrendingUp className="h-4 w-4 text-green-600" />;
      case "down":
        return <TrendingDown className="h-4 w-4 text-red-600" />;
      default:
        return <Minus className="h-4 w-4 text-gray-600" />;
    }
  };

  const getTrendColor = () => {
    switch (trend) {
      case "up":
        return "text-green-600";
      case "down":
        return "text-red-600";
      default:
        return "text-gray-600";
    }
  };

  return (
    <Card className="h-full w-full" style={style}>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-medium text-gray-600">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-center justify-between">
          <div>
            <div className="text-2xl font-bold">{value}</div>
            <div className={`flex items-center gap-1 text-sm ${getTrendColor()}`}>
              {getTrendIcon()}
              <span>{change}</span>
              <span className="text-gray-500">{description}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

// 레지스트리에 등록
componentRegistry.register("stats", StatsCardRenderer);
componentRegistry.register("stats-card", StatsCardRenderer);

export { StatsCardRenderer };