import Image from "next/image";

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

interface DealBannerProps {
  backgroundColor?: string;
  imageSrc?: string;
  imageAlt?: string;
  title?: string;
  description?: string;
  showIcon?: boolean;
  onIconClick?: () => void;
  className?: string;
}

export default function DealBanner({
  backgroundColor = "#3f877c",
  imageSrc = "/images/deal-banner-product.png",
  imageAlt = "",
  title,
  description,
  showIcon = false,
  onIconClick,
  className,
}: DealBannerProps) {
  return (
    <section
      style={{ backgroundColor }}
      className={cn(
        "relative flex min-h-[150px] w-full overflow-hidden rounded-lg px-5 py-5 text-white sm:min-h-[166px] sm:px-8 lg:items-center lg:px-10",
        className
      )}
    >
      {imageSrc && (
        <div className="pointer-events-none absolute -left-2 bottom-0 top-0 w-[150px] sm:w-[200px] lg:w-[240px]">
          <Image
            src={imageSrc}
            alt={imageAlt}
            fill
            sizes="(max-width: 640px) 150px, (max-width: 1024px) 200px, 240px"
            className="object-contain object-left-bottom"
            priority
          />
        </div>
      )}

      {(title || description) && (
        <div className="relative z-10 ml-[120px] min-w-0 max-w-[560px] py-2 sm:ml-[170px] lg:ml-[225px]">
          {title && (
            <h2 className="text-xl font-medium leading-tight tracking-normal sm:text-3xl">
              {title}
            </h2>
          )}
          {description && (
            <p className="mt-2 text-xs leading-5 text-white/90 sm:text-sm">
              {description}
            </p>
          )}
        </div>
      )}

      {showIcon && (
        <button
          type="button"
          onClick={onIconClick}
          className="absolute right-5 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/25 text-white transition-colors hover:bg-black/35 sm:right-8 sm:h-16 sm:w-16"
          aria-label="View deal"
        >
          <svg className="h-5 w-5 sm:h-7 sm:w-7" 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>
      )}
    </section>
  );
}
