"use client";

import React from "react";
import { ListWidgetConfig, QueryResult } from "../types";
import { Label } from "@/components/ui/label";
import { UnifiedColumnEditor } from "../widgets/list-widget/UnifiedColumnEditor";
import { ListTableOptions } from "../widgets/list-widget/ListTableOptions";

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

/**
 * 리스트 위젯 설정 섹션
 * - 컬럼 설정
 * - 테이블 옵션
 */
export function ListWidgetSection({ queryResult, config, onConfigChange }: ListWidgetSectionProps) {
  return (
    <div className="space-y-3">
      {/* 컬럼 설정 - 쿼리 실행 후에만 표시 */}
      {queryResult && queryResult.columns.length > 0 && (
        <div className="rounded-lg bg-background p-3 shadow-sm">
          <Label className="mb-2 block text-xs font-semibold">컬럼 설정</Label>
          <UnifiedColumnEditor queryResult={queryResult} config={config} onConfigChange={onConfigChange} />
        </div>
      )}

      {/* 테이블 옵션 */}
      {config.columns.length > 0 && (
        <div className="rounded-lg bg-background p-3 shadow-sm">
          <Label className="mb-2 block text-xs font-semibold">테이블 옵션</Label>
          <ListTableOptions config={config} onConfigChange={onConfigChange} />
        </div>
      )}
    </div>
  );
}