import { IconHomeFilled } from "@tabler/icons-react";
import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Spinner } from "@/components/ui/spinner";
import { Separator } from "@/components/ui/separator";

export const LoadingContainer = () => {
  
  return (
    <div className="flex flex-col gap-6 w-full max-w-md">
      <Card className="flex flex-col p-0">
        <CardHeader className="flex flex-col gap-4 justify-center items-center pt-6">
          <CardTitle className="flex flex-row items-center justify-center gap-1 text-2xl font-bold text-center">
            <IconHomeFilled className="w-6 h-6" />
            <Label className="text-2xl font-bold text-center">SecNex</Label>
          </CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-6 px-0 pt-6">
          <div className="flex flex-col gap-6 px-6">
            <div className="flex justify-center items-center gap-6 pb-4">
              <div className="flex flex-col gap-2 bg-violet-200 rounded-full p-4">
                <div className="flex justify-center items-center gap-6 border-2 border-violet-900 rounded-full">
                  <Spinner className="size-8 animate-spin text-violet-900" />
                </div>
              </div>
            </div>
          </div>
          <Separator className="w-full" />
          <div className="flex flex-col gap-4 items-center justify-center w-full px-6 pb-6">
            <Label className="text-zinc-700 dark:text-zinc-300 font-medium text-xs text-center">Secured by SecNex</Label>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};