import Image from "next/image";
import Link from "next/link";
import type { StaticImageItem } from "@/lib/meshkee/types";
import {
  imageSubtext,
  imageTitleEn,
  imageTitleFa,
} from "@/lib/meshkee/static-slots";

export function SlotBanner({
  image,
  fallbackEyebrow,
  fallbackTitle,
  fallbackText,
  className = "banner",
}: {
  image?: StaticImageItem | null;
  fallbackEyebrow?: string;
  fallbackTitle: string;
  fallbackText: string;
  className?: string;
}) {
  const titleFa = imageTitleFa(image) || fallbackTitle;
  const titleEn = imageTitleEn(image) || fallbackEyebrow || "";
  const subtext = imageSubtext(image) || fallbackText;
  const style = image?.url
    ? {
        backgroundImage: `linear-gradient(135deg, rgba(0, 35, 75, 0.72), rgba(136, 63, 63, 0.62)), url(${image.url})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }
    : undefined;

  const content = (
    <>
      {titleEn ? <p className="eyebrow">{titleEn}</p> : null}
      <h3>{titleFa}</h3>
      <p>{subtext}</p>
    </>
  );

  if (image?.linkUrl) {
    return (
      <a href={image.linkUrl} className={className} style={style}>
        {content}
      </a>
    );
  }

  return (
    <div className={className} style={style}>
      {content}
    </div>
  );
}

export function SlotLinkedImage({
  image,
  fallbackSrc,
  alt,
  width,
  height,
  className,
}: {
  image?: StaticImageItem | null;
  fallbackSrc: string;
  alt: string;
  width: number;
  height: number;
  className?: string;
}) {
  const src = image?.url || fallbackSrc;
  const resolvedAlt = imageTitleFa(image) || alt;
  const node = (
    <Image
      src={src}
      alt={resolvedAlt}
      width={width}
      height={height}
      className={className}
    />
  );

  if (image?.linkUrl) {
    return (
      <a href={image.linkUrl} aria-label={resolvedAlt}>
        {node}
      </a>
    );
  }

  return node;
}