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

import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
import { Star } from "@components/Stars.tsx";
export function RecipeHero({ recipe }: { recipe: Recipe }) {
  const { meta: { image = "Recipes/images/placeholder.jpg" } = {} } = recipe;

  const imageUrl = image.startsWith("Recipes/images/")
    ? `/api/images?image=${image}&width=800`
    : image;

  return (
    <div class="relative w-full h-[400px] rounded-3xl overflow-hidden bg-black">
      <img
        src={imageUrl}
        alt="Recipe Banner"
        class="object-cover w-full h-full"
      />

      <div class="absolute top-8 left-8 ">
        <a
          class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg block"
          href="/recipes"
        >
          Back
        </a>
      </div>

      {recipe.meta?.link &&
        (
          <div class="absolute top-8 right-8 ">
            <a
              href={recipe.meta.link}
              target="__blank"
              class="p-2 ml-4 bg-gray-300 text-gray-800 rounded-lg flex"
              name="Link to Original recipe"
            >
              <IconExternalLink />
            </a>
          </div>
        )}

      <div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 noisy-gradient flex gap-4 items-center pt-12">
        <h2
          class="relative text-4xl font-bold z-10"
          style={{ color: "#1F1F1F" }}
        >
          {recipe.name}
        </h2>

        {recipe.meta?.rating && <Star rating={recipe.meta.rating} />}
      </div>
    </div>
  );
}