import React from 'react';

const Jumbotron3 = ({ title, subtitle, buttons, videoSrc }) => {
  return (
    <section className=" dark:bg-gray-900">
      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 grid lg:grid-cols-2 gap-8 lg:gap-16">
        <div className="flex flex-col justify-center">
          <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none  md:text-5xl lg:text-6xl dark:text-white">{title}</h1>
          <p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">{subtitle}</p>
          <div className="flex flex-col space-y-4 sm:flex-row 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} 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>
        <div>
          <iframe className="mx-auto w-full lg:max-w-xl h-64 rounded-lg sm:h-96 shadow-xl" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
        </div>
      </div>
    </section>
  );
};

export default Jumbotron3;

// Example Usage

// 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 text-center",
//       }
//     ],
//     videoSrc: "https://www.youtube.com/embed/KaLxCiilHns",
//   };


//   <Jumbotron3 {...jumbotronProps} />