import { fetchJson } from '../../lib/api';
import type { Recipe } from '../../features/inventory/types';
import Navigation from '../Navigation';
import MealPlanClient from './MealPlanClient';

export default async function MealPlanPage() {
  const recipes = await fetchJson<Recipe[]>('/api/recipes').catch(() => [] as Recipe[]);
  return (
    <main style={{ padding: '1rem', maxWidth: '900px', margin: '0 auto' }}>
      <Navigation />
      <h1 style={{ marginBottom: '0.25rem' }}>Matsedel</h1>
      <p style={{ color: '#666', marginBottom: '1.5rem' }}>
        Välj ett recept per dag — se en samlad ingredienslista i slutet.
      </p>
      <MealPlanClient recipes={recipes} />
    </main>
  );
}