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

export const Box = define('Box', {
  // Base box - minimal styling, designed for customization via style prop
})

export const RedBox = define('RedBox', {
  background: theme('colors-red'),
  color: theme('colors-bg'),
  padding: theme('spacing-1'),
  textAlign: 'center',
})

export const GreenBox = define('GreenBox', {
  background: theme('colors-success'),
  color: theme('colors-bg'),
  padding: theme('spacing-1'),
  textAlign: 'center',
})

export const BlueBox = define('BlueBox', {
  background: theme('colors-blue'),
  color: theme('colors-bg'),
  padding: theme('spacing-1'),
  textAlign: 'center',
})

export const GrayBox = define('GrayBox', {
  background: theme('colors-bgMuted'),
  padding: theme('spacing-4'),
})

export const Test = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '24px' }}>
      <div>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>Box Component</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          <Box style={{ background: '#3b82f6', color: '#ffffff', padding: '16px' }}>
            Basic Box with custom background and text color
          </Box>
          <Box style={{ padding: '8px', border: '2px solid #d1d5db', borderRadius: '8px' }}>
            Box with padding and border
          </Box>
        </div>
      </div>

      <div>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>Color Variants</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
          <RedBox>Red Box</RedBox>
          <GreenBox>Green Box</GreenBox>
          <BlueBox>Blue Box</BlueBox>
          <GrayBox>Gray Box</GrayBox>
        </div>
      </div>

      <div>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>Nested Boxes</h2>
        <Box style={{ background: '#f3f4f6', padding: '16px' }}>
          <Box style={{ background: '#e5e7eb', padding: '12px' }}>
            <Box style={{ background: '#d1d5db', padding: '8px' }}>
              Nested boxes demonstration
            </Box>
          </Box>
        </Box>
      </div>
    </div>
  )
}