'use client';

/**
 * EmptyState - Zeigt eine Nachricht an, wenn keine Services konfiguriert sind
 */
export function EmptyState() {
  return (
    <div className="flex flex-col items-center justify-center py-12">
      <svg
        className="w-16 h-16 text-slate-400 mb-4"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={1.5}
          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
        />
      </svg>
      <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
        Keine Dienste konfiguriert
      </h3>
      <p className="text-slate-600 dark:text-slate-400 mt-2 text-center max-w-md">
        Füge Dienste in der Konfigurationsdatei <code className="bg-slate-200 dark:bg-slate-700 px-2 py-1 rounded text-sm">src/data/services.ts</code> hinzu, um sie hier anzuzeigen
      </p>
    </div>
  );
}