import React from 'react';

const Jumbotron4 = ({ sections }) => {
  return (
    <section className="bg-white dark:bg-gray-900">
      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16">
        {/* Main Section */}
        {sections.map((section, index) => (
          <React.Fragment key={index}>
            {/* Main Content */}
            <div className={`bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 md:p-12 mb-8`}>
              <a href={section.badgeLink} className={`${section.badgeBgColor} ${section.badgeTextColor} text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-md mb-2`}>
                {section.badgeIcon && (
                  <svg className={`${section.badgeIconSize} me-1.5`} aria-hidden="true" fill="currentColor" viewBox={section.badgeIconViewBox}>
                    <path d={section.badgeIconPath}></path>
                  </svg>
                )}
                {section.badgeText}
              </a>
              <h1 className="text-gray-900 dark:text-white text-3xl md:text-5xl font-extrabold mb-2">{section.title}</h1>
              <p className="text-lg font-normal text-gray-500 dark:text-gray-400 mb-6">{section.subtitle}</p>
              {section.buttons.map((button, btnIndex) => (
                <a key={btnIndex} href={button.href} className={button.className}>
                  {button.text}
                  {button.icon && (
                    <svg className={button.iconClassName} aria-hidden="true" fill="none" viewBox={button.iconViewBox}>
                      <path d={button.iconPathD} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" stroke="currentColor"></path>
                    </svg>
                  )}
                </a>
              ))}
            </div>
          </React.Fragment>
        ))}

        {/* Additional Content Sections */}
        <div className="grid md:grid-cols-2 gap-8">
          {sections.flatMap(section => section.additionalContent || []).map((content, contentIndex) => (
            <div key={contentIndex} className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 md:p-12">
              <a href={content.link} className={`${content.badgeBgColor} ${content.badgeTextColor} text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-md mb-2`}>
                {content.badgeIcon && (
                  <svg className="w-2.5 h-2.5 me-1.5" fill="currentColor" viewBox={content.badgeIconViewBox}>
                    <path d={content.badgeIconPath} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
                  </svg>
                )}
                {content.badgeText}
              </a>
              <h2 className="text-gray-900 dark:text-white text-3xl font-extrabold mb-2">{content.title}</h2>
              <p className="text-lg font-normal text-gray-500 dark:text-gray-400 mb-4">{content.subtitle}</p>
              <a href={content.readMoreLink} className="text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg">
                Read more
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Jumbotron4;


// const sectionsProps = {
//     sections: [
//       {
//         badgeText: "Tutorial",
//         badgeLink: "#",
//         badgeBgColor: "bg-blue-100",
//         badgeTextColor: "text-blue-800",
//         badgeIconPath: "M1 5h12m0 0L9 1m4 4L9 9",
//         badgeIconViewBox: "0 0 14 10",
//         badgeIconSize: "w-2.5 h-2.5",
//         title: "How to quickly deploy a static website",
//         subtitle: "Static websites are now used to bootstrap lots of websites...",
//         buttons: [
//           {
//             text: "Read more",
//             href: "#",
//             className: "inline-flex justify-center items-center py-2.5 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",
//           }
//         ],
//         additionalContent: [
//           {
//             badgeText: "Design",
//             badgeLink: "#",
//             badgeBgColor: "bg-green-100",
//             badgeTextColor: "text-green-800",
//             badgeIconPath: "...",
//             title: "Start with Flowbite Design System",
//             subtitle: "Static websites are now used to bootstrap lots of websites...",
//             readMoreLink: "#",
//           },
//           {
//             badgeText: "Design",
//             badgeLink: "#",
//             badgeBgColor: "bg-green-100",
//             badgeTextColor: "text-green-800",
//             badgeIconPath: "...",
//             title: "Start with Flowbite Design System",
//             subtitle: "Static websites are now used to bootstrap lots of websites...",
//             readMoreLink: "#",
//           },
//           // Additional cards...
//         ]
//       },
//       // Additional sections...
//     ]
//   };

//   <Jumbotron4 {...sectionsProps} />