import { useState } from 'react';
import Badge from '@common/components/ui/Badge';
import SidePanel from '@common/components/ui/SidePanel';

const Section = ({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) => (
  <div className="mb-8">
    <h2 className="wing-section-header mb-1">{title}</h2>
    {desc && <p className="wing-section-desc mb-4">{desc}</p>}
    <div>{children}</div>
  </div>
);

const SidePanelSection = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Section title="SidePanel" desc="wing-panel-right/left 사이드패널">
        <button
          className="wing-btn wing-btn-secondary"
          onClick={() => setVisible(!visible)}
        >
          {visible ? '사이드패널 닫기' : '사이드패널 열기'}
        </button>
      </Section>
      {visible && (
        <SidePanel
          position="right"
          width="default"
          header={
            <div className="flex items-center justify-between w-full">
              <span className="wing-title">상세 정보</span>
              <button className="wing-btn wing-btn-secondary" onClick={() => setVisible(false)}>닫기</button>
            </div>
          }
          footer={
            <button className="wing-btn wing-btn-primary w-full">저장</button>
          }
        >
          <div className="p-3 space-y-3">
            <div className="wing-info-row">
              <span className="wing-info-label">상태</span>
              <Badge color="green">정상</Badge>
            </div>
            <div className="wing-info-row">
              <span className="wing-info-label">분류</span>
              <Badge>공지사항</Badge>
            </div>
            <div className="wing-info-row">
              <span className="wing-info-label">작성자</span>
              <span className="wing-info-value">이동녘</span>
            </div>
            <div className="wing-info-row">
              <span className="wing-info-label">작성일</span>
              <span className="wing-info-value">2026-03-10</span>
            </div>
            <div className="wing-info-row">
              <span className="wing-info-label">조회수</span>
              <span className="wing-info-value">142</span>
            </div>
          </div>
        </SidePanel>
      )}
    </>
  );
};

export default SidePanelSection;