import { define } from 'forge'
import { theme } from './theme'

export const Section = define('Section', {
  display: 'flex',
  flexDirection: 'column',
  padding: theme('spacing-6'),

  variants: {
    gap: {
      0: { gap: 0 },
      1: { gap: theme('spacing-1') },
      2: { gap: theme('spacing-2') },
      3: { gap: theme('spacing-3') },
      4: { gap: theme('spacing-4') },
      6: { gap: theme('spacing-6') },
      8: { gap: theme('spacing-8') },
      12: { gap: theme('spacing-12') },
    },
  },
})

export const Test = () => {
  return (
    <div>
      <Section>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Default Section</h2>
        <p>This is a section with default styling</p>
        <p>It has padding and vertical spacing between children</p>
      </Section>

      <Section gap={4}>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Compact Section</h2>
        <p>This section has a smaller gap (4)</p>
        <p>Items are closer together</p>
      </Section>

      <Section gap={12}>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Spacious Section</h2>
        <p>This section has a larger gap (12)</p>
        <p>Items have more breathing room</p>
      </Section>

      <Section style={{ backgroundColor: '#f3f4f6', maxWidth: '600px' }}>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Constrained Width Section</h2>
        <p>This section has a max width of 600px and a gray background</p>
        <p>Good for centering content on wide screens</p>
      </Section>
    </div>
  )
}