"use client";

import React, { useCallback } from "react";
import { Eye } from "lucide-react";
import { CardRenderer } from "../renderers/CardRenderer";
import type { ComponentConfig } from "@/types/report";
import type { QueryResult } from "../renderers/types";

interface CardPreviewPanelProps {
  component: ComponentConfig;
}

export function CardPreviewPanel({ component }: CardPreviewPanelProps) {
  const dummyGetQueryResult = useCallback(
    (): QueryResult | null => null,
    [],
  );

  return (
    <div className="flex flex-col items-center gap-4 p-4 shrink-0">
      <div className="w-full">
        <div className="flex items-center gap-2 mb-1 text-sm font-semibold text-gray-700">
          <Eye className="w-4 h-4 text-blue-600" />
          미리보기 (저장 전 상태)
        </div>
        <p className="text-xs text-muted-foreground">
          실제 데이터는 저장 후 확인 가능합니다.
        </p>
      </div>
      <div className="flex min-h-[600px] w-full items-center justify-center rounded-xl border border-gray-200 bg-gray-100 p-8">
        <div
          className="w-full overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm"
          style={{
            maxWidth: Math.min(component.width, 700),
            minHeight: Math.min(component.height, 550),
          }}
        >
          <CardRenderer
            component={component}
            getQueryResult={dummyGetQueryResult}
          />
        </div>
      </div>
    </div>
  );
}