import { AppSidebar } from "@/components/layout/app-sidebar"
import { Header } from "@/components/layout/header"
import { SidebarInset } from "@/components/ui/sidebar"
import { DashboardTabs } from "@/components/dashboard/dashboard-tabs"
import { MetricCard } from "@/components/dashboard/metric-card"
import { RevenueChart } from "@/components/dashboard/revenue-chart"
import { SalesChart } from "@/components/dashboard/sales-chart"
import { PaymentsTable } from "@/components/dashboard/payments-table"
import { UnclassifiedPaymentsTable } from "@/components/dashboard/unclassified-payments-table"
import { TeamTable } from "@/components/dashboard/team-table"
import { getDashboardData } from "@/lib/mock-data"

export default function Home() {
  const data = getDashboardData()

  // <TeamTable team={data.team} />
  return (
    <>
      <AppSidebar />
      <SidebarInset>
        <Header />
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
          <div className="flex items-center justify-between space-y-2 pt-4">
            <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
          </div>
          <DashboardTabs>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              {data.metrics.map((metric) => (
                <MetricCard key={metric.id} {...metric} />
              ))}
            </div>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
              <div className="col-span-4">
                <RevenueChart data={data.revenueData} />
              </div>
              <div className="col-span-3">
                <SalesChart data={data.salesData} />
              </div>
            </div>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
              <div className="col-span-4">
                <PaymentsTable payments={data.payments} />
              </div>
              <div className="col-span-3">
                <UnclassifiedPaymentsTable transactions={data.transactions} />
              </div>
            </div>
          </DashboardTabs>
        </div>
      </SidebarInset>
    </>
  )
}