import { FC } from 'react'

type Props = {
    color: string
    text?: string
    size?: 'sm' | 'md' | 'lg'
}

const StatusCircle: FC<Props> = ({ color, text, size = 'md' }) => {
    const sizeClasses = {
        sm: 'size-2',
        md: 'size-3',
        lg: 'size-4'
    }

    const colorClasses = {
        green: 'bg-green-500',
        blue: 'bg-blue-500',
        red: 'bg-red-500',
        gray: 'bg-gray-500',
        purple: 'bg-purple-500',
        orange: 'bg-orange-500',
        yellow: 'bg-yellow-500'
    }

    if (text) {
        return (
            <div className="flex items-center gap-2">
                <div className={`${sizeClasses[size]} ${colorClasses[color as keyof typeof colorClasses] || 'bg-gray-500'} rounded-full`} />
                <span className="text-sm font-medium">{text}</span>
            </div>
        )
    }

    return (
        <div
            className={`${sizeClasses[size]} rounded-full ${colorClasses[color as keyof typeof colorClasses] || 'bg-gray-500'}`}
        />
    )
}

export default StatusCircle