import React from 'react'

interface StatusWidgetProps {
  title: string
  status: boolean
  statusText?: string
  subtitle?: string
  icon?: React.ReactNode
  className?: string
}

export const StatusWidget: React.FC<StatusWidgetProps> = ({
  title,
  status,
  statusText,
  subtitle,
  icon,
  className = '',
}) => {
  return (
    <div className={`bg-white overflow-hidden shadow rounded-lg ${className}`}>
      <div className="p-5">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            {icon && <div className="flex-shrink-0">{icon}</div>}
            <div className="flex-shrink-0">
              <div
                className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                  status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                }`}
              >
                {statusText || (status ? 'Online' : 'Offline')}
              </div>
            </div>
          </div>
        </div>
        <div className="mt-4">
          <div className="text-2xl font-semibold text-gray-900">{title}</div>
          {subtitle && (
            <div className="mt-1 text-sm text-gray-500">{subtitle}</div>
          )}
        </div>
      </div>
    </div>
  )
}