import ExpenseCard from "@/app/_components/expense/expense-card";
import Header from "@/components/header";
import { Icons } from "@/components/icons";
import Section from "@/components/section";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { api } from "@/trpc/server";
import { currentUser } from "@clerk/nextjs/server";
import Link from "next/link";
import React from "react";

export default async function Page() {
  const splits = await api.expense.getAll();
  const sessionUser = await currentUser();

  return (
    <>
      <Header text="Expenses">
        <Button asChild size={"sm"}>
          <Link href="/add">Add Expense</Link>
        </Button>
      </Header>
      <Section>
        {/* FILTER BAR */}
        <div className="py-4 flex items-center gap-2">
          <Button
            size={"icon"}
            variant={"outline"}
            className="text-muted-foreground bg-card/25"
          >
            <Icons.filter className="size-6 " />
          </Button>
          <Input placeholder="Search..." />
        </div>

        <ul className="space-y-4">
          {splits.map((expense) => (
            <li key={expense.id}>
              <ExpenseCard expense={expense} sessionUserId={sessionUser?.id!} />
            </li>
          ))}
        </ul>
      </Section>
    </>
  );
}