import UserForm from "@/components/user-form";
import Breadcrumb from "@/components/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { dummyUsers } from "@/constants/data";
import { User } from "@/types/user";

const breadcrumbItems = [
  { title: "Dashboard", link: "/dashboard" },
  { title: "Users", link: "/dashboard/users" },
  { title: "Edit" },
];

export default function Page({ params }: { params: { id: string } }) {
  console.log(params);

  const user = dummyUsers.find((user) => user.id === +params.id);

  console.log(user);

  return (
    <ScrollArea className="h-[calc(100vh-53px)]">
      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
        <Breadcrumb items={breadcrumbItems} />
        <div className="w-full h-full flex justify-center items-center">
          <Card className="max-w-[700px] w-full mb-8">
            <CardHeader>
              <CardTitle className="mb-4 font-bold text-xl">
                Edit User
              </CardTitle>
              <Separator />
            </CardHeader>

            <CardContent>
              <UserForm user={user as User} />
            </CardContent>
          </Card>
        </div>
      </div>
      <ScrollBar />
    </ScrollArea>
  );
}