import React from 'react';

const Jumbotron2 = ({ backgroundType, backgroundSource, title, subtitle, buttons }) => {
  return (
    <section className="relative bg-gray-700 bg-blend-multiply">
      {/* Conditionally render background based on type */}
      {backgroundType === 'image' ? (
        <img src={backgroundSource} alt="Background" className="absolute inset-0 object-cover w-full h-full" />
      ) : (
        <video src={backgroundSource} autoPlay loop muted className="absolute inset-0 object-cover w-full h-full">
          Your browser does not support the video tag.
        </video>
      )}

      {/* Overlay to ensure text is readable on any background */}
      <div className="absolute inset-0 bg-black opacity-50"></div>

      {/* Content container */}
      <div className="relative px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56">
        <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-white md:text-5xl lg:text-6xl">{title}</h1>
        <p className="mb-8 text-lg font-normal text-gray-300 lg:text-xl sm:px-16 lg:px-48">{subtitle}</p>
        <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 gap-2">
          {buttons.map((button, index) => (
            <a key={index} href={button.href} className={button.className}>
              {button.text}
              {button.icon && (
                <svg className={button.iconClassName} aria-hidden="true" fill="none" viewBox={button.iconViewBox} xmlns="http://www.w3.org/2000/svg">
                  <path d={button.iconPathD} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" stroke="currentColor" />
                </svg>
              )}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Jumbotron2;

{/* <Jumbotron2
  backgroundType="video"
  backgroundSource="https://res.cloudinary.com/dx25lltre/video/upload/v1707633110/SpaceVideos/Untitled_design_4_nvvtr0.mp4"
  title="We invest in the world’s potential"
  subtitle="Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth."
  buttons={[
    {
      text: "Get started",
      href: "#",
      className: "inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900",
      icon: true,
      iconClassName: "w-3.5 h-3.5 ms-2 rtl:rotate-180",
      iconViewBox: "0 0 14 10",
      iconPathD: "M1 5h12m0 0L9 1m4 4L9 9",
    },
    // Additional buttons...
  ]}
/> */}