import { fetchJson } from '../../../lib/api';
import type { Recipe } from '../../../features/inventory/types';
import Navigation from '../../Navigation';
import RecipeDetailClient from './RecipeDetailClient';
import { notFound } from 'next/navigation';

interface Props {
  params: Promise<{ id: string }>;
}

export default async function RecipeDetailPage({ params }: Props) {
  const { id } = await params;
  let recipe: Recipe;

  try {
    recipe = await fetchJson<Recipe>(`/api/recipes/${id}`);
  } catch {
    notFound();
  }

  return (
    <main style={{ padding: '1rem', maxWidth: '900px', margin: '0 auto' }}>
      <Navigation />
      <RecipeDetailClient recipe={recipe} />
    </main>
  );
}