import Sidebar from "@/components/Home/Sidebar";
import TopBar from "@/components/Home/TopBar";
import { Card, CardContent } from "@/components/ui/card";
import { type FC } from "react";
import { Outlet } from "react-router";

const DashboardLayout: FC = () => {
  return (
    <div className="relative z-10 flex items-center justify-center min-h-screen">
      <Card className="overflow-y-auto min-h-screen w-full min-w-full shadow-lg bg-white/85 dark:bg-black/85 backdrop-blur-md sm:rounded-none">
        <div className="flex flex-col w-full h-full flex-1 items-center sm:pt-0 relative">
          <div className="flex flex-row items-center absolute left-4 top-4">
            <img src="/icon.png" alt="icon" className="w-6 h-6" />

            <div className="ml-2">
              <p className="text-sm text-gray-600 text-left dark:text-gray-500">
                Home Guard
              </p>
            </div>
          </div>

          <CardContent
            className="w-full h-full max-h-full space-y-4 flex-1 bg-black/5 dark:bg-white/5"
            spacing={false}
          >
            <div className="flex flex-row">
              <Sidebar />
              <div className="max-w-full flex-1 sm:max-h-screen overflow-y-auto">
                <div className="flex flex-col w-full items-center gap-2">
                  <TopBar />
                </div>
                <Outlet />
              </div>
            </div>
          </CardContent>
        </div>
      </Card>
    </div>
  );
};

export default DashboardLayout;