import type { StaticImageSlot } from "@/lib/types";
import { toCssAspectRatio } from "@/lib/format";

export default function FullBanner({ slot }: { slot?: StaticImageSlot }) {
  const img = slot?.images[0];
  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;

  const src = img?.url ?? "/images/banners/full-banner.svg";
  const href = img?.linkUrl ?? "#";

  return (
    <section className="boxed py-2 md:py-4">
      <a href={href} className="block overflow-hidden rounded-2xl border border-line">
        <img
          src={src}
          alt=""
          style={aspectStyle}
          className={`w-full object-cover ${
            aspectStyle ? "" : "aspect-[16/5] md:aspect-[16/4]"
          }`}
        />
      </a>
    </section>
  );
}