'use client';

import { useApi } from '@/lib/useApi';
import { ActivityTab } from '../ActivityTab';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { PageSkeleton, NoHousehold } from '../helpers';

export default function ActivityPage() {
  const { householdId, isLoading: sessionLoading } = useApi();

  if (sessionLoading) {
    return (
      <>
        <SetPageHeader
          title="Cabinet Activity"
          subtitle="Spending and cabinet changes"
          crumbs={['Medicines', 'Activity']}
        />
        <PageSkeleton />
      </>
    );
  }

  if (!householdId) {
    return (
      <>
        <SetPageHeader
          title="Cabinet Activity"
          subtitle="Spending and cabinet changes"
          crumbs={['Medicines', 'Activity']}
        />
        <NoHousehold />
      </>
    );
  }

  return (
    <>
      <SetPageHeader
        title="Cabinet Activity"
        subtitle="Spending and cabinet changes"
        crumbs={['Medicines', 'Activity']}
      />
      <div className="mt-page">
        <ActivityTab householdId={householdId} />
      </div>
    </>
  );
}
