import React from 'react';

interface Props {
  topTitle?: string;
  bottomTitle?: string;
  top: React.ReactNode;
  bottom: React.ReactNode;
  className?: string;
}

/** 좌·우 패널 상·하단 카드 분리 */
const PaperSplitPanel: React.FC<Props> = ({ topTitle, bottomTitle, top, bottom, className = '' }) => (
  <div className={`ptd-split-panel${className ? ` ${className}` : ''}`}>
    <section className="ptd-split-card ptd-split-card--top">
      {topTitle && <div className="ptd-split-card-head">{topTitle}</div>}
      <div className="ptd-split-card-body">{top}</div>
    </section>
    <section className="ptd-split-card ptd-split-card--bottom">
      {bottomTitle && <div className="ptd-split-card-head">{bottomTitle}</div>}
      <div className="ptd-split-card-body">{bottom}</div>
    </section>
  </div>
);

export default PaperSplitPanel;
