'use client';

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

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

  if (sessionLoading) {
    return (
      <>
        <SetPageHeader
          title="Pill Organizer"
          subtitle="Fill a week of pills at once"
          crumbs={['Medicines', 'Organizer']}
        />
        <PageSkeleton />
      </>
    );
  }

  if (!householdId) {
    return (
      <>
        <SetPageHeader
          title="Pill Organizer"
          subtitle="Fill a week of pills at once"
          crumbs={['Medicines', 'Organizer']}
        />
        <NoHousehold />
      </>
    );
  }

  return (
    <>
      <SetPageHeader
        title="Pill Organizer"
        subtitle="Fill a week of pills at once"
        crumbs={['Medicines', 'Organizer']}
      />
      <div className="mt-page">
        <OrganizerTab householdId={householdId} />
      </div>
    </>
  );
}
