import { type ReactNode } from 'react';
import { Card, CardBody, CardHeader } from '../../components/ui/card';
import { EmptyState } from '../../components/ui/states';

/** Platzhalter für die Benutzerverwaltung (Phase 2). */
export function UsersPage(): ReactNode {
  return (
    <div className="mx-auto max-w-6xl space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Benutzerverwaltung</h1>
        <p className="mt-1 text-sm text-slate-500">
          Benutzer anlegen, bearbeiten und verwalten.
        </p>
      </div>

      <Card>
        <CardHeader title="Benutzer" description="Alle Benutzer der Plattform" />
        <CardBody>
          <EmptyState
            title="Benutzerverwaltung folgt in Phase 2"
            description="Die vollständige Benutzerverwaltung (Liste, Anlegen, Bearbeiten, Deaktivieren) wird in Phase 2 implementiert."
            icon={<span className="text-3xl" aria-hidden="true">👥</span>}
          />
        </CardBody>
      </Card>
    </div>
  );
}