import type { Metadata } from 'next';
import { Header } from './components/Header';
import { ServiceCard } from './components/ServiceCard';
import { services } from '@/lib/data';
import './globals.css';

export const metadata: Metadata = {
  title: 'Homelab Dashboard',
  description: 'Verwaltungs-Dashboard für dein Homelab',
};

export default function Home() {
  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <Header />
      
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Services Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {services.map((service) => (
            <ServiceCard key={service.id} service={service} />
          ))}
        </div>

        {/* Empty State (falls keine Services) */}
        {services.length === 0 && (
          <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"
            >
              <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">
              Füge Dienste in der Datenkonfiguration hinzu, um sie hier anzuzeigen
            </p>
          </div>
        )}
      </main>
    </div>
  );
}