import { useLocalSearchParams } from "expo-router";

import { AppBackground } from "@/components/AppBackground";
import { PageHeader } from "@/components/PageHeader";
import { TabPage } from "@/components/TabPage";
import { TimeClockPanel } from "@/components/time-clock/TimeClockPanel";

export default function TimerScreen() {
  const params = useLocalSearchParams<{
    clientId?: string | string[];
    invoiceId?: string | string[];
  }>();
  const clientId = Array.isArray(params.clientId) ? params.clientId[0] : params.clientId;
  const invoiceId = Array.isArray(params.invoiceId) ? params.invoiceId[0] : params.invoiceId;

  return (
    <AppBackground>
      <TabPage>
        <TimeClockPanel
          header={
            <PageHeader
              title="Time clock"
              subtitle="Track billable hours and link them to invoices"
            />
          }
          defaultClientId={clientId ?? ""}
          defaultInvoiceId={invoiceId ?? ""}
          compact
        />
      </TabPage>
    </AppBackground>
  );
}