"use client";

import Image from "next/image";

import { cn } from "@/lib/utils";

interface LargePromoBannerProps {
  imageSrc?: string;
  imageAlt?: string;
  eyebrow?: string;
  title?: string;
  description?: string;
  showNavigation?: boolean;
  onPrevious?: () => void;
  onNext?: () => void;
  className?: string;
}

function ArrowButton({
  direction,
  onClick,
}: {
  direction: "left" | "right";
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "absolute top-1/2 z-20 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-black/35 text-white backdrop-blur-sm transition-colors hover:bg-black/50",
        direction === "left" ? "left-5" : "right-5"
      )}
      aria-label={direction === "left" ? "Previous banner" : "Next banner"}
    >
      <svg
        className={cn("h-5 w-5", direction === "left" && "rotate-180")}
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth={2.4}
      >
        <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
      </svg>
    </button>
  );
}

export default function LargePromoBanner({
  imageSrc = "/images/large-sale-banner.png",
  imageAlt = "Seasonal sale banner",
  eyebrow = "Save More This Season",
  title = "Up to 40% Off",
  description = "Discover quality products at special prices, available for a limited time.",
  showNavigation = false,
  onPrevious,
  onNext,
  className,
}: LargePromoBannerProps) {
  const hasText = Boolean(eyebrow || title || description);

  return (
    <section
      className={cn(
        "relative min-h-[180px] w-full overflow-hidden rounded-md bg-gray-900 sm:min-h-[240px] lg:min-h-[300px]",
        className
      )}
    >
      {imageSrc && (
        <Image
          src={imageSrc}
          alt={imageAlt}
          fill
          sizes="100vw"
          className="object-cover"
          priority
        />
      )}

      <div className="absolute inset-0 bg-gradient-to-r from-black/75 via-black/25 to-black/20" />

      {showNavigation && (
        <>
          <ArrowButton direction="left" onClick={onPrevious} />
          <ArrowButton direction="right" onClick={onNext} />
        </>
      )}

      {hasText && (
        <div className="relative z-10 flex min-h-[180px] max-w-[520px] flex-col justify-center px-7 py-8 text-white sm:min-h-[240px] sm:px-16 lg:min-h-[300px] lg:px-24">
          {eyebrow && (
            <p className="mb-3 text-xs font-medium text-white/85 sm:text-sm">
              {eyebrow}
            </p>
          )}
          {title && (
            <h2 className="text-3xl font-semibold leading-tight tracking-normal sm:text-5xl">
              {title}
            </h2>
          )}
          {description && (
            <p className="mt-3 max-w-[440px] text-sm leading-6 text-white/90 sm:text-base">
              {description}
            </p>
          )}
        </div>
      )}
    </section>
  );
}
