import React from 'react';

const Jumbotron1 = ({ title, subtitle, buttons, background }) => {
  const isVideoBackground = background?.endsWith('.mp4');

  return (
    <section className="relative dark:bg-gray-900 border-b-2 border-blue-400 overflow-hidden">
      {isVideoBackground && (
        <video autoPlay loop muted playsInline className="absolute z-0 w-auto min-w-full min-h-full max-w-none">
          <source src={background} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      )}
      {/* Use an overlay to ensure text is readable on top of the video */}
      <div className={`absolute z-10 w-full h-full ${isVideoBackground ? 'bg-black bg-opacity-50' : ''}`}></div>
      <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 relative z-20">
        <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl dark:text-white text-blue-400">{title}</h1>
        <p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">{subtitle}</p>
        <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
          {buttons.map((button, index) => (
            <a key={index} href={button.href} className={button.className}>
              {button.text}
              {button.icon && (
                <svg className={button.iconClassName} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox={button.iconViewBox}>
                  <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={button.iconPathD} />
                </svg>
              )}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Jumbotron1;



// Example Props

// const jumbotronProps = {
//     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",
//       },
//       {
//         text: "Learn more",
//         href: "#",
//         className: "py-3 px-5 sm:ms-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
//       }
//     ]
//   };


// USAGE 

{/* <Jumbotron1 {...jumbotronProps} /> */}