'use client';

import { ServiceStatus } from '@/src/types/service';

interface StatusBadgeProps {
  status: ServiceStatus;
  size?: 'sm' | 'md';
}

const STATUS_CONFIG = {
  online: {
    bgColor: 'bg-green-50 dark:bg-green-950',
    textColor: 'text-green-700 dark:text-green-300',
    dotColor: 'bg-green-500',
    label: 'Online',
  },
  warning: {
    bgColor: 'bg-amber-50 dark:bg-amber-950',
    textColor: 'text-amber-700 dark:text-amber-300',
    dotColor: 'bg-amber-500',
    label: 'Warnung',
  },
  offline: {
    bgColor: 'bg-red-50 dark:bg-red-950',
    textColor: 'text-red-700 dark:text-red-300',
    dotColor: 'bg-red-500',
    label: 'Offline',
  },
  unknown: {
    bgColor: 'bg-slate-50 dark:bg-slate-950',
    textColor: 'text-slate-700 dark:text-slate-300',
    dotColor: 'bg-slate-500',
    label: 'Unbekannt',
  },
} as const;

export function StatusBadge({ status, size = 'md' }: StatusBadgeProps) {
  const config = STATUS_CONFIG[status];
  const sizeClasses = size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-3 py-1 text-xs';

  return (
    <div
      className={`inline-flex items-center gap-2 rounded-full ${sizeClasses} ${config.bgColor}`}
    >
      <span
        className={`w-2 h-2 rounded-full ${config.dotColor} ${
          status !== 'unknown' ? 'animate-pulse' : ''
        }`}
      />
      <span className={`font-medium ${config.textColor}`}>
        {config.label}
      </span>
    </div>
  );
}