Badge

'use client';

import * as React from 'react';
import { Badge } from './badge';
import type { BadgeColor, BadgeType } from './badge-variants';

const TYPES: BadgeType[] = ['pill-color', 'badge-color', 'badge-modern'];
const COLORS: BadgeColor[] = ['gray', 'brand', 'error', 'warning', 'success', 'blue'];

export default function BadgeDemo({ replay = 0 }: { replay?: number }) {
  const [approved, setApproved] = React.useState(false);
  const [tags, setTags] = React.useState(['Design', 'Research']);

  React.useEffect(() => {
    if (replay === 0) return;
    setApproved(false);
    setTags(['Design', 'Research']);
    const timer = window.setTimeout(() => setApproved(true), 600);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div className="flex flex-col items-center gap-5">
      {TYPES.map((type) => (
        <div key={type} className="flex flex-wrap justify-center gap-2">
          {COLORS.map((color) => (
            <Badge key={color} type={type} color={color} dot={type === 'badge-modern'}>
              Label
            </Badge>
          ))}
        </div>
      ))}
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge data-testid="status" color={approved ? 'success' : 'warning'} dot>
          {approved ? 'Approved' : 'In review'}
        </Badge>
        {tags.map((tag) => (
          <Badge
            key={tag}
            type="badge-color"
            onRemove={() => setTags((list) => list.filter((t) => t !== tag))}
          >
            {tag}
          </Badge>
        ))}
      </div>
    </div>
  );
}