"use client";

import Link from "next/link";
import { ArrowLeft, Users } from "lucide-react";
import { TeamSettings } from "@/components/settings/TeamSettings";

export default function TeamPage() {
  return (
    <div className="mx-auto max-w-3xl space-y-6 p-4 sm:p-6">
      <div className="flex items-center gap-3">
        <Link
          href="/einstellungen"
          className="rounded-md p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
        >
          <ArrowLeft className="h-4 w-4" />
        </Link>
        <div className="flex items-center gap-2.5">
          <Users className="h-4 w-4 text-neutral-500" />
          <h1 className="text-lg font-semibold text-neutral-900">
            Team verwalten
          </h1>
        </div>
      </div>

      <section className="rounded-xl border border-neutral-200 bg-white p-5">
        <div className="border-b border-neutral-100 pb-3">
          <h2 className="text-sm font-semibold text-neutral-900">
            Mitglieder
          </h2>
          <p className="mt-0.5 text-xs text-neutral-500">
            Benutzer einladen und Rollen verwalten
          </p>
        </div>
        <div className="mt-4">
          <TeamSettings />
        </div>
      </section>
    </div>
  );
}