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

export function RecipeCard({ recipe }: { recipe: Recipe }) {
  return (
    <a
      href={`/recipes/${recipe.id}`}
      style={{
        backgroundImage: `url(${
          recipe?.meta?.image || "/api/recipes/images/placeholder.jpg"
        }?width=200&height=200)`,
        backgroundSize: "cover",
      }}
      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
  lg:w-56 lg:h-56 
  sm:w-40 sm:h-40 
  w-32 h-32"
    >
      <div class="h-full flex flex-col justify-between relative z-10">
        <div>
          {/* Recipe Card content */}
        </div>
        <div class="mt-2">
          {recipe.name}
        </div>
      </div>
      <div class="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-black to-transparent" />
    </a>
  );
}