import React from 'react';
import tw from 'twin.macro';

export default {
  title: 'System/Spacing',
};

const STYLES = {
  'module-d': tw`w-module-d h-module-d`,
  'module-m': tw`w-module-m h-module-m`,
  'org-d': tw`w-org-d h-org-d`,
  'org-m': tw`w-org-m h-org-m`,
  'gap-d': tw`w-gap-d h-gap-d`,
  'gap-m': tw`w-gap-m h-gap-m`,
  'mol-d': tw`w-mol-d h-mol-d`,
  'mol-m': tw`w-mol-m h-mol-m`,
  'atom-d': tw`w-atom-d h-atom-d`,
  'atom-m': tw`w-atom-m h-atom-m`,
  'h-d': tw`w-h-d h-h-d`,
  'h-m': tw`w-h-m h-h-m`,
  'car-d': tw`w-car-d h-car-d`,
  'car-m': tw`w-car-m h-car-m`,
  'sm-d': tw`w-sm-d h-sm-d`,
  'sm-m': tw`w-sm-m h-sm-m`,
  'xs-d': tw`w-xs-d h-xs-d`,
  'xs-m': tw`w-xs-m h-xs-m`,
};

function SpacingCard({ name, ...props }: any) {
  return (
    <div tw="flex flex-col gap-2">
      <h2>{name}</h2>
      <div tw="block bg-annotation" {...props} />
    </div>
  );
}

export function Default() {
  return (
    <div tw="grid grid-cols-2 gap-x-4 gap-y-8 max-w-screen-sm">
      {Object.entries(STYLES).map(([key, style]) => (
        <SpacingCard key={key} name={key} css={style} />
      ))}
    </div>
  );
}