import { Document } from "../lib/documents.ts";
import { Recipe } from "../lib/recipes.ts";

export function RecipeCard({ recipe }: { recipe: Recipe }) {
  return (
    <a
      href={`/recipes/${recipe.id}`}
      style={{
        backgroundImage: `url(${recipe?.meta?.image})`,
        backgroundSize: "cover",
      }}
      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 
flex flex-col justify-between
      lg:w-56 lg:h-56 
      sm:w-40 sm:h-40 
      w-32 h-32"
    >
      <div>
      </div>
      <div class="mt-2 ">
        {recipe.name}
      </div>
    </a>
  );
}