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

export default async function RecipesPage() {
  const recipes = await fetchJson<Recipe[]>('/api/recipes');

  return (
    <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
      <h1>Recept</h1>
      <p>Här kan du jämföra recept mot nuvarande hemmavaror.</p>
      <RecipePreview recipes={recipes} />
    </main>
  );
}