import { TASK_STATUS } from '@/constants'
import { cn } from '@/lib/utils'

export function StatusDot({ state, className }: { state?: string; className?: string }) {
  const color =
    state === TASK_STATUS.SUCCESS
      ? 'bg-[var(--success)]'
      : state === TASK_STATUS.FAILED || state === TASK_STATUS.TIMEOUT
        ? 'bg-[var(--danger)]'
        : state === TASK_STATUS.RUNNING
          ? 'bg-[var(--warning)] animate-pulse'
          : state === TASK_STATUS.CANCELLED
            ? 'bg-[var(--text-muted)]'
            : 'bg-[var(--text-muted)]'

  return <span className={cn('inline-block h-2 w-2 shrink-0 rounded-full', color, className)} />
}
