"use client";

import React from "react";
import { CustomMetricConfig, QueryResult } from "../types";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { AlertCircle } from "lucide-react";

interface CustomMetricSectionProps {
  queryResult: QueryResult | null;
  config: CustomMetricConfig;
  onConfigChange: (updates: Partial<CustomMetricConfig>) => void;
}

/**
 * 통계 카드 설정 섹션
 * - 메트릭 설정, 아이콘, 색상
 * 
 * TODO: 상세 설정 UI 추가 필요
 */
export function CustomMetricSection({ queryResult, config, onConfigChange }: CustomMetricSectionProps) {
  // 쿼리 결과가 없으면 안내 메시지 표시
  if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
    return (
      <div className="rounded-lg bg-background p-3 shadow-sm">
        <Label className="mb-2 block text-xs font-semibold">통계 카드 설정</Label>
        <Alert>
          <AlertCircle className="h-4 w-4" />
          <AlertDescription className="text-xs">
            먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.
          </AlertDescription>
        </Alert>
      </div>
    );
  }

  return (
    <div className="rounded-lg bg-background p-3 shadow-sm">
      <Label className="mb-2 block text-xs font-semibold">통계 카드 설정</Label>
      <Alert>
        <AlertCircle className="h-4 w-4" />
        <AlertDescription className="text-xs">
          통계 카드 상세 설정 UI는 추후 추가 예정입니다.
        </AlertDescription>
      </Alert>
    </div>
  );
}