import { Chip, Tooltip, Box } from '@mui/material'
import { CheckCircle, Error, Warning, CloudOff } from '@mui/icons-material'

export type StatusType = 'connected' | 'disconnected' | 'error' | 'warning' | 'unknown'

interface StatusIndicatorProps {
  status: StatusType
  label: string
  tooltip?: string
}

export default function StatusIndicator({ status, label, tooltip }: StatusIndicatorProps) {
  const getColor = () => {
    switch (status) {
      case 'connected':
        return 'success'
      case 'disconnected':
        return 'default'
      case 'error':
        return 'error'
      case 'warning':
        return 'warning'
      default:
        return 'default'
    }
  }

  const getIcon = () => {
    switch (status) {
      case 'connected':
        return <CheckCircle fontSize="small" />
      case 'disconnected':
        return <CloudOff fontSize="small" />
      case 'error':
        return <Error fontSize="small" />
      case 'warning':
        return <Warning fontSize="small" />
      default:
        return null
    }
  }

  const chip = (
    <Chip
      icon={getIcon()}
      label={label}
      color={getColor()}
      size="small"
      variant="outlined"
    />
  )

  if (tooltip) {
    return (
      <Tooltip title={tooltip}>
        {chip}
      </Tooltip>
    )
  }

  return chip
}

