export function SchedulerStatusCard({
  title,
  status,
  description,
  icon,
}: {
  title: string
  status: 'active' | 'inactive' | 'warning' | 'unknown'
  description: string
  icon: React.ReactNode
}) {
  const statusColors = {
    active: 'bg-emerald-100 border-emerald-200 text-emerald-700',
    inactive: 'bg-slate-100 border-slate-200 text-slate-700',
    warning: 'bg-amber-100 border-amber-200 text-amber-700',
    unknown: 'bg-slate-100 border-slate-200 text-slate-500',
  }

  const statusBadges = {
    active: 'bg-emerald-500',
    inactive: 'bg-slate-400',
    warning: 'bg-amber-500',
    unknown: 'bg-slate-300',
  }

  return (
    <div className={`rounded-xl border p-5 ${statusColors[status]}`}>
      <div className="flex items-start gap-4">
        <div className="flex-shrink-0">{icon}</div>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h4 className="font-semibold">{title}</h4>
            <span className={`w-2 h-2 rounded-full ${statusBadges[status]}`} />
          </div>
          <p className="text-sm mt-1 opacity-80">{description}</p>
        </div>
      </div>
    </div>
  )
}