tvone/app/components/tvone-publication-banner.tsx

import Image from "next/image";
import Link from "next/link";

export type TvonePublicationBannerProps = {
  /** When set, the whole slot links here (campaign URL). */
  href?: string;
  /** Optional creative — leaderboard-style wide image (e.g. 970×90 or similar). */
  imageSrc?: string;
  imageAlt?: string;
  /** Short line shown when no image (placeholder for unsold inventory). */
  title?: string;
  subtitle?: string;
  /** Small label above the slot (legal / transparency). */
  slotLabel?: string;
};

export function TvonePublicationBanner({
  href = "#publicidade",
  imageSrc,
  imageAlt = "Publicidade",
  title = "Espaço publicitário",
  subtitle = "Reserve este espaço para a sua marca. Contacte a nossa equipa comercial.",
  slotLabel = "Publicidade",
}: TvonePublicationBannerProps) {
  const inner = imageSrc ? (
    <Image
      src={imageSrc}
      alt={imageAlt}
      width={1200}
      height={120}
      className="h-auto w-full max-h-[120px] object-cover object-center md:max-h-[140px]"
      sizes="100vw"
      priority
    />
  ) : (
    <div className="flex min-h-[88px] w-full flex-col items-center justify-center gap-1 bg-[#f0f0f3] px-4 py-5 text-center md:min-h-[100px] md:flex-row md:justify-between md:text-left">
      <div>
        <p className="text-sm font-semibold text-neutral-800">{title}</p>
        <p className="mt-0.5 max-w-xl text-xs text-neutral-600 md:text-sm">{subtitle}</p>
      </div>
      <span className="mt-2 shrink-0 rounded-2xl border border-neutral-300 bg-white px-3 py-1 text-[11px] font-medium text-neutral-700 md:mt-0">
        Espaço disponível
      </span>
    </div>
  );

  return (
    <aside
      className="w-full border-y border-neutral-200/90 bg-white"
      aria-label={slotLabel}
    >
      <div className="mx-auto w-full max-w-[1200px] px-0">
        <div className="flex items-center gap-2 px-4 pt-2 pb-1">
          <span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-400">{slotLabel}</span>
        </div>
        <div className="overflow-hidden">
          {href ? (
            <Link
              href={href}
              className="block w-full outline-none transition-opacity hover:opacity-95 focus-visible:ring-2 focus-visible:ring-[#0066cc] focus-visible:ring-offset-2"
              target={href.startsWith("http") ? "_blank" : undefined}
              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
            >
              {inner}
            </Link>
          ) : (
            inner
          )}
        </div>
      </div>
    </aside>
  );
}