import React from 'react'

import spacingData from './spacing.json'
import { HelperClassTemplate } from '../../CSS/HelperClassTemplate'

export default {
  title: 'CSS Helper Classes/Spacing/Margins',
  parameters: {
    docs: {
      page: () => <HelperClassTemplate />,
    },
  },
} as Record<string, unknown>

const MarginGroupsGrid = () => (
  <div className='grid grid-cols-1 gap-8 md:grid-cols-2'>
    {spacingData.marginGroups.map((group) => (
      <div key={group.prefix}>
        <h4 className='mb-2 text-base font-semibold'>{group.title}</h4>
        {group.classes.map((item) => (
          <div key={item.class} className='mb-2'>
            <div className='text-xs'>
              {item.class} <span>({item.px}px)</span>
            </div>
            <div className='mt-1 inline-block border bg-chart-light-5-orange'>
              <div className={`${item.class} h-8 w-8 bg-purple p-1`}></div>
            </div>
          </div>
        ))}
      </div>
    ))}
  </div>
)

export const margins = () => <MarginGroupsGrid />
margins.parameters = {
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
  viewMode: 'docs',
}