import { isYoutubeLink } from "@lib/string.ts";
import { IconBrandYoutube } from "@components/icons.tsx";

export function Card(
  { link, title, image, backgroundSize = 100 }: {
    backgroundSize?: number;
    link?: string;
    title?: string;
    image?: string;
  },
) {
  const backgroundStyle = {
    backgroundImage: `url(${image})`,
    backgroundSize: "cover",
    boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff1 inset",
  };

  if (backgroundSize !== 100) {
    backgroundStyle["backgroundSize"] = `${backgroundSize}%`;
    backgroundStyle["backgroundRepeat"] = "no-repeat";
    backgroundStyle["backgroundPosition"] = "center";
  }

  return (
    <a
      href={link}
      style={backgroundStyle}
      class="text-white rounded-3xl shadow-md p-4 relative 
  lg:w-56 lg:h-56 
  sm:w-48 sm:h-48
  w-[37vw] h-[37vw]"
    >
      {!image?.includes("placeholder.svg") &&
        (
          <img
            class="absolute opacity-30 top-0 left-0 object-cover w-full h-full -z-10"
            src={image}
            style={{ filter: "blur(30px)" }}
          />
        )}
      <div class="h-full flex flex-col justify-between relative z-10">
        <div>
          {/* Recipe Card content */}
        </div>
        <div class="mt-2 flex items-center gap-2">
          {isYoutubeLink(link || "") && <IconBrandYoutube />}
          {title}
        </div>
      </div>
      <div class="absolute inset-x-0 bottom-0 h-3/4" />
    </a>
  );
}
