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 ButtonSection = () => (
  <Section title="Button" desc="wing-btn 변형">
    <div className="flex gap-2 flex-wrap items-center">
      <button className="wing-btn wing-btn-primary">Primary</button>
      <button className="wing-btn wing-btn-secondary">Secondary</button>
      <button className="wing-btn wing-btn-outline">Outline</button>
      <button className="wing-btn wing-btn-danger">Danger</button>
      <button className="wing-btn wing-btn-primary" disabled>Disabled</button>
    </div>
  </Section>
);

export default ButtonSection;