Astryx Badge

'use client';

import Badge from '@/components/ui/astryx-badge';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

const COUNTS = [
  {variant: 'info' as const, label: '3', note: 'Messages'},
  {variant: 'error' as const, label: '99+', note: 'Alerts'},
  {variant: 'success' as const, label: '12', note: 'Completed'},
  {variant: 'warning' as const, label: '5', note: 'Pending'},
];

export default function BadgeCountBadges() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="horizontal" gap={8} hAlign="center" vAlign="center">
          {COUNTS.map(({variant, label, note}) => (
            <Stack key={note} direction="vertical" gap={2} hAlign="center">
              <Badge variant={variant} label={label} />
              <Text type="supporting" color="secondary">
                {note}
              </Text>
            </Stack>
          ))}
        </Stack>
      </div>
    </Theme>
  );
}