import { Color, colors } from './colors.js'
import { radius } from './radius.js'
import { Text } from '../components/Text/index.js'

export function Default() {
  return (
    <div
      style={{
        display: 'grid',
        gap: 24,
      }}
    >
      {Object.keys(colors).map((key) => (
        <div>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              gap: 8,
              height: 64,
              background: colors[key as Color],
              borderRadius: radius[8],
              border: `1px solid ${colors.neutral10}`,
              marginBottom: 16,
            }}
          />
          <Text variant="subtext-bold">{key}</Text>
        </div>
      ))}
    </div>
  )
}
