"use client";

import React from "react";
import { ChartConfig, QueryResult, ChartDataSource } from "../types";
import { Label } from "@/components/ui/label";
import { ChartConfigPanel } from "../ChartConfigPanel";

interface ChartConfigSectionProps {
  queryResult: QueryResult | null;
  dataSource: ChartDataSource;
  config: ChartConfig;
  chartType?: string;
  onConfigChange: (config: ChartConfig) => void;
}

/**
 * 차트 설정 섹션
 * - 차트 타입, 축 매핑, 스타일 설정
 */
export function ChartConfigSection({
  queryResult,
  dataSource,
  config,
  chartType,
  onConfigChange,
}: ChartConfigSectionProps) {
  // 쿼리 결과가 없으면 표시하지 않음
  if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
    return null;
  }

  return (
    <div className="rounded-lg bg-background p-3 shadow-sm">
      <Label className="mb-2 block text-xs font-semibold">차트 설정</Label>
      <ChartConfigPanel
        config={config}
        queryResult={queryResult}
        onConfigChange={onConfigChange}
        chartType={chartType}
        dataSourceType={dataSource.type}
        query={dataSource.query}
      />
    </div>
  );
}