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

import type { FC, ReactNode } from 'react'

export type StatusBadgeTone =
    'success'
    | 'neutral'
    | 'warning'

type Props = {
    children: ReactNode
    tone:     StatusBadgeTone }

const TONES: Record<StatusBadgeTone, string[]> = {
    success: [
	'border-emerald-300 bg-emerald-50 text-emerald-700',
	'dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200'],
    warning: [
	'border-amber-300 bg-amber-50 text-amber-700',
	'dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200'],
    neutral: [
	'border-stone-300 bg-stone-50 text-stone-700',
	'dark:border-stone-700 dark:bg-stone-900 dark:text-stone-200'] }


const StatusBadge: FC<Props> = ({ children, tone }) => (
    <span
	className={cn (
	    'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium',
	    TONES[tone])}>
      {children}
    </span>)

export default StatusBadge