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 { clientId, invoiceId } = useLocalSearchParams<{
    clientId?: string;
    invoiceId?: string;
  }>();

  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>
  );
}