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(
  { data, subline, backlink }: {
    backlink: string;
    subline?: string[];
    data: { meta?: { image?: string; link?: string }; name: string };
  },
) {
  const { meta: { image } = {} } = data;

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

  return (
    <div
      class={`relative w-full h-[${
        imageUrl ? 400 : 200
      }px] rounded-3xl overflow-hidden`}
    >
      {imageUrl &&
        (
          <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={backlink}
        >
          Back
        </a>
      </div>

      {data.meta?.link &&
        (
          <div class="absolute top-8 right-8 ">
            <a
              href={data.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 ${
          imageUrl ? "py-8" : ""
        } `}
      >
        <div
          class={`${imageUrl ? "noisy-gradient" : ""} flex gap-4 items-center ${
            imageUrl ? "pt-12" : ""
          }`}
        >
          <h2
            class="relative text-4xl font-bold z-10"
            style={{ color: imageUrl ? "#1F1F1F" : "white" }}
          >
            {data.name}
          </h2>

          {data.meta?.rating && <Star rating={data.meta.rating} />}
        </div>
        {subline?.length &&
          (
            <div
              class="relative z-50 flex gap-5 font-sm text-light mt-3"
              style={{ color: imageUrl ? "#1F1F1F" : "white" }}
            >
              {subline.filter((s) => s && s?.length > 1).map((s) => {
                return <span>{s}</span>;
              })}
            </div>
          )}
      </div>
    </div>
  );
}