const FIGMA_ASSET_BASE = "/assets/ark-library/figma";

export const recommendationCoverFallbacks = [
  `${FIGMA_ASSET_BASE}/recommendation-1.png`,
  `${FIGMA_ASSET_BASE}/recommendation-2.png`,
  `${FIGMA_ASSET_BASE}/recommendation-3.png`,
  `${FIGMA_ASSET_BASE}/recommendation-4.png`,
  `${FIGMA_ASSET_BASE}/recommendation-5.png`,
] as const;

export function FigmaBanner() {
  return (
    <picture className="block overflow-hidden border border-[#2a2a32] bg-black shadow-[0_24px_70px_rgba(0,0,0,0.18)] max-md:-mx-4 max-md:rounded-none max-md:border-x-0 md:rounded-xl">
      <source
        media="(max-width: 439px)"
        srcSet={`${FIGMA_ASSET_BASE}/banner-375.png`}
      />
      <source
        media="(max-width: 575px)"
        srcSet={`${FIGMA_ASSET_BASE}/banner-440.png`}
      />
      <source
        media="(max-width: 767px)"
        srcSet={`${FIGMA_ASSET_BASE}/banner-576.png`}
      />
      <img
        src={`${FIGMA_ASSET_BASE}/banner-desktop.png`}
        alt=""
        className="h-auto w-full object-cover"
        width={1280}
        height={290}
        loading="eager"
        decoding="async"
      />
    </picture>
  );
}