import { appConfig } from "@/app.config";
import Header from "@/components/header";
import Section from "@/components/section";

import { ModeToggle } from "@/components/mode-toggle";
import { UserButton } from "@clerk/nextjs";
import { Icons } from "@/components/icons";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { getAmount } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export default async function Home() {
  return (
    <>
      <Header
        text={
          <>
            <Icons.logo
              className="size-32 scale-125 mr-2 absolute -left-4 -top-1/2  text-muted-foreground/5 -z-10 
                        mask-r-from-30% 
            "
            />
            <span>{appConfig.name}</span>
            <ModeToggle className="ml-4" />
          </>
        }
      >
        <div className="flex gap-6 items-center ">
          <UserButton />
        </div>
      </Header>

      <Section className="">
        <Card className="bg-card/5">
          <CardHeader className="flex items-center">
            <CardTitle className="size-full flex flex-col gap-1">
              <p>
                Your Balance{" "}
                <span className="font-normal text-sm text-muted-foreground">
                  (You Owe)
                </span>
              </p>
              <span className="text-xl text-destructive">
                {getAmount(812.47)}
              </span>
            </CardTitle>
            <Link
              className="cursor-pointer h-max flex items-center bg-primary text-primary-foreground rounded-lg pl-4  w-24 justify-between"
              href={"/add"}
            >
              <span>Add</span>
              <Icons.addSquare className="size-8" />
            </Link>
          </CardHeader>
        </Card>
        <div className="size-full border rounded-xl"></div>
        <div className="size-full border rounded-xl"></div>
        <div className="size-full border rounded-xl"></div>
        <div className="size-full border rounded-xl max-h-52"></div>
      </Section>
    </>
  );
}