import type { SampleMeta } from '../../../widgets/core';
import { SectionMenuLayout } from '../SectionMenuLayout';

export const sampleMeta: SampleMeta = {
  id: 'section-menu-layout-base',
  componentId: 'section-menu-layout',
  title: 'Section Menu Layout',
  description: '좌측 섹션 메뉴와 우측 본문 영역을 함께 구성하는 레이아웃 컴포넌트입니다.',
  category: 'Navigation',
  kind: 'base',
  variantLabel: 'Base',
  order: 81,
  features: ['docs'],
};

export function Sample() {
  return (
    <SectionMenuLayout
      title="Operations Guide"
      description="입고와 출고 절차를 빠르게 이동합니다."
      items={[
        { key: 'inbound', label: 'Inbound', href: '#inbound', description: '입고 절차' },
        { key: 'outbound', label: 'Outbound', href: '#outbound', description: '출고 절차' },
      ]}
    >
      <div style={{ display: 'grid', gap: 16 }}>
        <section id="inbound">
          <h3>Inbound</h3>
          <p>입고 검수와 적치 절차를 확인합니다.</p>
        </section>
        <section id="outbound">
          <h3>Outbound</h3>
          <p>피킹과 출고 마감 절차를 확인합니다.</p>
        </section>
      </div>
    </SectionMenuLayout>
  );
}
