import { AppShell } from "@/components/app-shell"
import { ChartAreaInteractive } from "@/components/chart-area-interactive"
import { SectionCards } from "@/components/section-cards"
import { SiteHeader } from "@/components/site-header"
import { TicketsTable } from "@/components/tickets/tickets-table"
import { tickets } from "@/lib/mocks/tickets"

const recentTickets = tickets.slice(0, 10)

export default function Dashboard() {
  return (
    <AppShell
      header={
        <SiteHeader
          title="Central de operações"
          lead="Monitoramento em tempo real"
          secondaryAction={<SiteHeader.SecondaryButton>Abrir ticket</SiteHeader.SecondaryButton>}
          primaryAction={<SiteHeader.PrimaryButton>Modo play</SiteHeader.PrimaryButton>}
        />
      }
    >
      <SectionCards />
      <div className="grid gap-6 px-4 lg:grid-cols-[1.1fr_0.9fr] lg:px-6">
        <ChartAreaInteractive />
        <div className="rounded-xl border bg-card">
          <TicketsTable tickets={recentTickets} />
        </div>
      </div>
    </AppShell>
  )
}