'use client';

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

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

  if (sessionLoading) {
    return (
      <>
        <SetPageHeader
          title="Medicine Library"
          subtitle="All known medicines"
          crumbs={['Medicines', 'Library']}
        />
        <PageSkeleton />
      </>
    );
  }

  if (!householdId) {
    return (
      <>
        <SetPageHeader
          title="Medicine Library"
          subtitle="All known medicines"
          crumbs={['Medicines', 'Library']}
        />
        <NoHousehold />
      </>
    );
  }

  return (
    <>
      <SetPageHeader
        title="Medicine Library"
        subtitle="All known medicines"
        crumbs={['Medicines', 'Library']}
      />
      <div className="mt-page">
        <LibraryTab householdId={householdId} />
      </div>
    </>
  );
}
