import React from 'react';
import { Div } from '../basic/Div';
import { H2 } from '../basic/H2';
import { P } from '../basic/P';
import { Img } from '../basic/Img';
import type { EditorAttrs } from '../../types';

export interface CardProps {
  title?: string;
  content?: string;
  imageUrl?: string;
  imageAlt?: string;
  className?: string;
  onClick?: () => void;
  style?: React.CSSProperties;
  /**
   * DOM id 속성 (레이아웃 편집기 코어 일괄 ID)
   */
  id?: string;
  /** 레이아웃 편집기 주입 속성 (편집 모드 전용, 루트에 spread) */
  editorAttrs?: EditorAttrs;
}

/**
 * Card 집합 컴포넌트
 *
 * 기본 컴포넌트를 조합하여 카드 UI를 구성합니다.
 * 레이아웃 JSON에서 title, content, imageUrl 등의 props만 전달하면
 * 내부적으로 Div, H2, P, Img 컴포넌트를 조합하여 완성된 카드를 렌더링합니다.
 *
 * @example
 * // 레이아웃 JSON 사용 예시
 * {
 *   "name": "Card",
 *   "props": {
 *     "title": "사용자 정보",
 *     "content": "홍길동 (hong@example.com)",
 *     "imageUrl": "/avatar.png"
 *   }
 * }
 */
export const Card: React.FC<CardProps> = ({
  title,
  content,
  imageUrl,
  imageAlt = '',
  className = '',
  onClick,
  style,
  id,
  editorAttrs,
}) => {
  return (
    <Div
      className={`card-clickable ${className}`}
      onClick={onClick}
      style={style}
      id={id} {...editorAttrs}
    >
      {imageUrl && (
        <Div className="w-full">
          <Img
            src={imageUrl}
            alt={imageAlt}
            className="card-image"
          />
        </Div>
      )}

      <Div className="p-4">
        {title && (
          <H2 className="card-title">
            {title}
          </H2>
        )}

        {content && (
          <P className="card-content">
            {content}
          </P>
        )}
      </Div>
    </Div>
  );
};