"use client";

import { AutoRegisteringLayoutRenderer } from "../AutoRegisteringLayoutRenderer";
import { LayoutRendererProps } from "../BaseLayoutRenderer";
import { AccordionLayoutDefinition } from "./index";
import { AccordionLayout } from "./AccordionLayout";

/**
 * accordion 렌더러 (새 구조)
 */
export class AccordionLayoutRenderer extends AutoRegisteringLayoutRenderer {
  /**
   * 레이아웃 정의 (자동 등록용)
   */
  static readonly layoutDefinition = AccordionLayoutDefinition;

  /**
   * 클래스 로드 시 자동 등록 실행
   */
  static {
    this.registerSelf();
  }

  /**
   * 렌더링 실행
   */
  render(): React.ReactElement {
    return <AccordionLayout {...this.props} renderer={this} />;
  }
}

/**
 * React 함수 컴포넌트로 래핑 (외부 사용용)
 */
export const AccordionLayoutComponent: React.FC<LayoutRendererProps> = (props) => {
  const renderer = new AccordionLayoutRenderer(props);
  return renderer.render();
};

// 개발 모드에서 Hot Reload 지원
if (process.env.NODE_ENV === 'development') {
  // HMR API 등록
  if ((module as any).hot) {
    (module as any).hot.accept();
    (module as any).hot.dispose(() => {
      AccordionLayoutRenderer.unregisterSelf();
    });
  }
}
