import { Counter } from './index.js'

export function Default() {
  return (
    <div style={{ display: 'flex', gap: 32, flexDirection: 'column' }}>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 24,
        }}
      >
        {['neutral', 'inverted', 'red', 'green', 'blue', 'orange', 'white'].map(
          (color) => (
            <Counter color={color as any}>0</Counter>
          ),
        )}
      </div>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 24,
        }}
      >
        {['neutral', 'inverted', 'red', 'green', 'blue', 'orange', 'white'].map(
          (color) => (
            <Counter color={color as any}>99+</Counter>
          ),
        )}
      </div>
    </div>
  )
}
