import { Outlet } from "react-router";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { UsersProvider, useUsersContext } from "./contexts/user-layout.context";

function UsersLayoutContent() {
  const { title, description, action } = useUsersContext();

  return (
    <div className="mx-auto space-y-6">
      <div className="max-w-full flex flex-col gap-6">
        <Card>
          <CardHeader className="flex items-center justify-between">
            <div>
              <CardTitle className="mb-1">{title}</CardTitle>
              <CardDescription>{description}</CardDescription>
            </div>

            {action}
          </CardHeader>
          <CardContent>
            <Outlet />
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

export default function UsersLayout() {
  return (
    <UsersProvider>
      <UsersLayoutContent />
    </UsersProvider>
  );
}