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 Spacing = () => (
  <Section title="간격 (Spacing)" desc="4px 그리드 기반 6단계">
    <div>
      <p className="wing-label mb-2">Spacing (4px grid)</p>
      <div className="flex items-end gap-2">
        {[4, 6, 8, 12, 16, 20].map((s) => (
          <div key={s} className="flex flex-col items-center gap-1">
            <div className="bg-primary-cyan/30 border border-primary-cyan/50" style={{ width: s, height: 40 }} />
            <span className="wing-meta text-text-3">{s}px</span>
          </div>
        ))}
      </div>
    </div>
  </Section>
);

export default Spacing;