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

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