import React from "react";
import { useRouter } from "next/router";
import styles from "./newBanner.module.scss";
import { ArrowRightOutlined } from "@ant-design/icons";

type NewBannerProps = {
  title?: string;
  subtitle?: string;
  backgroundImageUrl?: string;
  videoSrc?: string;
  onSendRFQ?: () => void;
  onExplore?: () => void;
};

const NewBanner: React.FC<NewBannerProps> = ({
  title = "India’s Trusted Procurement Platform for Best Quotes & On-Time Delivery",
  subtitle = "Smart sourcing for SMEs, traders & factories — smooth and reliable.",
  backgroundImageUrl = "/images/Banner.png",
  videoSrc = "/images/bgVideo.mp4",
  onSendRFQ,
  onExplore,
}) => {  const router = useRouter();
    const handleSendRFQ = () => {
    if (onSendRFQ) {
      onSendRFQ();
      return;
    }

    if (typeof window !== "undefined") {
      window.location.href = "/rfq";
    }
  };

  const handleExplore = () => {
    if (onExplore) {
      onExplore();
      return;
    }

    const val = ""; // Update with appropriate value
    const searchTerm = ""; // Update with appropriate search term
    
    router.push({
      pathname: `/products/All`,
      
    });
  };

  return (
    <section className={styles.banner} aria-label="Hero banner">
      <div className={styles.mediaLayer}>
        {videoSrc ? (
          <video
            className={styles.video}
            src={videoSrc}
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            // poster={backgroundImageUrl}
          />
        ) : (
          <div
            className={styles.bg}
            style={{
              backgroundImage: `url(${backgroundImageUrl})`,
            }}
          />
        )}
        <div className={styles.gradientOverlay} />
      </div>

      <div className={styles.contentWrap}>
        <h1 className={styles.title}>{title}</h1>
        <p className={styles.subtitle}>{subtitle}</p>

        <div className={styles.actions}>
          <button
            className={styles.rfqButton}
            onClick={handleSendRFQ}
            aria-label="Send RFQ"
          >
            Send RFQ 
            {/* <ArrowRightOutlined className={styles.arrow} /> */}
          </button>

          <button
            className={styles.exploreButton}
            onClick={handleExplore}
            aria-label="Explore"
          >
            Explore
          </button>
        </div>
      </div>
    </section>
  );
};

export default NewBanner;