'use client';

import { useApi } from '@/lib/useApi';
import { SetPageHeader } from '@/components/layout/SetPageHeader';
import { RecipeEditor } from '../RecipeEditor';

export default function NewRecipePage() {
  const { householdId, isLoading } = useApi();

  if (isLoading) {
    return (
      <>
        <SetPageHeader title="New Recipe" crumbs={['Recipes', 'New']} />
        <div style={{ padding: '28px 32px', color: 'var(--ink-muted)', fontSize: 14 }}>
          Loading...
        </div>
      </>
    );
  }

  if (!householdId) {
    return (
      <>
        <SetPageHeader title="New Recipe" crumbs={['Recipes', 'New']} />
        <div style={{ padding: '28px 32px', color: 'var(--ink-muted)', fontSize: 14 }}>
          You need to create or join a household first.
        </div>
      </>
    );
  }

  return (
    <>
      <SetPageHeader title="New Recipe" crumbs={['Recipes', 'New']} />
      <div style={{ padding: '28px 32px 56px' }}>
        <RecipeEditor householdId={householdId} />
      </div>
    </>
  );
}
