"use client";

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

interface MapConfigSectionProps {
  queryResult: QueryResult | null;
}

/**
 * 지도 위젯 설정 섹션
 * - 위도/경도 매핑
 * 
 * TODO: 상세 설정 UI 추가 필요
 */
export function MapConfigSection({ queryResult }: MapConfigSectionProps) {
  // 쿼리 결과가 없으면 안내 메시지 표시
  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>
  );
}