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

/**
 * Promotion component displaying a promotional banner for iMac products.
 * Features optimized image loading, strict TypeScript typing, and accessibility improvements.
 */
const Promotion: React.FC = () => {
  // Promotion data - makes it easier to maintain and modify content
  const promotionData = {
    title: "Save $500 today on your purchase of a new iMac computer.",
    description:
      'Reserve your new Apple iMac 27" today and enjoy exclusive savings with qualified activation. Pre-order now to secure your discount.',
    cta: {
      text: "Pre-order now",
      href: "/products/imac/pre-order",
    },
    image: {
      src: "https://flowbite.s3.amazonaws.com/blocks/e-commerce/imac-components.svg",
      alt: "iMac computer and peripherals",
    },
    link: {
      href: "/products",
      ariaLabel: "View iMac products",
    },
  };

  return (
    <section className="bg-white px-4 py-8 antialiased md:py-16">
      <div className="mx-auto grid max-w-screen-xl rounded-lg bg-gray-50 p-4 md:p-8 lg:grid-cols-12 lg:gap-8 lg:p-16 xl:gap-16">
        {/* Image Column - Wrapped in React.memo to prevent unnecessary re-renders */}
        <PromotionImage
          src={promotionData.image.src}
          alt={promotionData.image.alt}
          linkHref={promotionData.link.href}
          ariaLabel={promotionData.link.ariaLabel}
        />

        {/* Content Column */}
        <div className="me-auto place-self-center lg:col-span-7">
          <h1 className="mb-3 text-2xl font-bold leading-tight tracking-tight text-gray-900 md:text-4xl">
            {promotionData.title}
          </h1>
          <p className="mb-6 text-gray-500">{promotionData.description}</p>
          <Link
            href={promotionData.cta.href}
            className="inline-flex items-center justify-center rounded-lg bg-primary px-5 py-3 text-center text-base font-medium text-white hover:bg-secondary transition-colors duration-300"
            aria-label={`${promotionData.cta.text} iMac with discount`}
          >
            {promotionData.cta.text}
          </Link>
        </div>
      </div>
    </section>
  );
};

// Extracted image component for better reusability and memoization
interface PromotionImageProps {
  src: string;
  alt: string;
  linkHref: string;
  ariaLabel: string;
}

const PromotionImage: React.FC<PromotionImageProps> = React.memo(
  ({ src, alt, linkHref, ariaLabel }) => (
    <div className="lg:col-span-5 lg:mt-0">
      <Link href={linkHref} aria-label={ariaLabel}>
        <div className="relative h-56 w-56 sm:h-96 sm:w-96 md:h-full md:w-full">
          <Image
            src={src}
            alt={alt}
            fill
            sizes="(max-width: 640px) 224px, (max-width: 768px) 384px, 100vw"
            className="mb-4 object-contain"
            priority
          />
        </div>
      </Link>
    </div>
  )
);

PromotionImage.displayName = "PromotionImage";

export default Promotion;