import { type FC } from 'react'
import { clx } from '@/helpers/utils'

type StatusVariant = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'active' | 'inactive'

type Props = {
    variant: StatusVariant
    label: string
}

const Status: FC<Props> = ({ variant, label }) => {
    const variantStyles: Record<StatusVariant, string> = {
        success: 'bg-green-100 text-green-600',
        error: 'bg-red-100 text-red-600',
        warning: 'bg-yellow-100 text-yellow-600',
        info: 'bg-blue-100 text-blue-600',
        pending: 'bg-gray-100 text-gray-600',
        active: 'bg-green-100 text-green-600',
        inactive: 'bg-gray-100 text-gray-400',
    }

    return (
        <div className={clx(
            'w-fit py-1 px-2 text-xs h-fit rounded-full',
            variantStyles[variant]
        )}>
            {label}
        </div>
    )
}

export default Status

