"use client";

import { createLayoutDefinition } from "../../utils/createLayoutDefinition";
import { HeroSectionLayout } from "./HeroSectionLayout";
import { HeroSectionLayoutRenderer } from "./HeroSectionLayoutRenderer";
import { LayoutRendererProps } from "../BaseLayoutRenderer";
import React from "react";

/**
 * heroSection 래퍼 컴포넌트 (DynamicLayoutRenderer용)
 */
const HeroSectionLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
  const renderer = new HeroSectionLayoutRenderer(props);
  return renderer.render();
};

/**
 * heroSection 레이아웃 정의
 */
export const HeroSectionLayoutDefinition = createLayoutDefinition({
  id: "hero-section",
  name: "heroSection",
  nameEng: "HeroSection Layout",
  description: "영웅 섹션 레이아웃입니다",
  category: "content",
  icon: "hero-section",
  component: HeroSectionLayoutWrapper,
  defaultConfig: {
    heroSection: {
      // TODO: 레이아웃별 설정 정의
    },
  },
  defaultZones: [
    {
      id: "zone1",
      name: "존 1",
      position: {},
      size: { width: "100%", height: "100%" },
    },
    {
      id: "zone2",
      name: "존 2",
      position: {},
      size: { width: "100%", height: "100%" },
    },
    {
      id: "zone3",
      name: "존 3",
      position: {},
      size: { width: "100%", height: "100%" },
    }
  ],
  tags: ["hero-section", "content", "layout"],
  version: "1.0.0",
  author: "개발자",
  documentation: "영웅 섹션 레이아웃입니다",
});

// 자동 등록을 위한 export
export { HeroSectionLayoutRenderer } from "./HeroSectionLayoutRenderer";