import styles from './StatusText.module.css'
import type { ReactNode } from 'react'

interface StatusTextProps {
  variant: 'success' | 'warning' | 'error' | 'running' | 'muted'
  bold?: boolean
  children: ReactNode
  className?: string
}

export function StatusText({ variant, bold = false, children, className }: StatusTextProps) {
  const classes = [
    styles.statusText,
    styles[variant],
    bold ? styles.bold : '',
    className ?? '',
  ].filter(Boolean).join(' ')

  return <span className={classes}>{children}</span>
}
