// components/shared/CombinedWorkflowLayout.jsx

import React from 'react';

const CombinedWorkflowLayout = ({ 
  introTitle = "Introduction and Workflow",
  advantageTitle = "Advantage",
  introItems = [],
  advantageItems = [],
  imageUrl,
  imageAlt = "Workflow diagram"
}) => {
  return (
    <div className="w-full min-w-0 bg-white">
      {/* Main container with two columns */}
      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
        
        {/* Left Column - Content */}
        <div className="w-full min-w-0 px-4 sm:px-6 lg:px-12 py-6 lg:py-8">
          {/* Introduction Section */}
          <section className="mb-8">
            <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
              {introTitle}
            </h2>
            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
              {introItems.map((item, index) => (
                <li key={index} className="flex items-start">
                  <span 
                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
                    style={{backgroundColor: '#faae31'}}
                  ></span>
                  <span className="text-justify break-words">{item}</span>
                </li>
              ))}
            </ul>
          </section>

          {/* Advantage Section */}
          <section>
            <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
              {advantageTitle}
            </h2>
            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
              {advantageItems.map((item, index) => (
                <li key={index} className="flex items-start">
                  <span 
                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
                    style={{backgroundColor: '#faae31'}}
                  ></span>
                  <span className="text-justify break-words">{item}</span>
                </li>
              ))}
            </ul>
          </section>
        </div>

        {/* Right Column - Workflow Image */}
        <div className="w-full min-w-0 flex items-start justify-center p-4 lg:p-6">
          <div className="w-full max-w-md">
            {imageUrl ? (
              <img 
                src={imageUrl}
                alt={imageAlt}
                className="w-full h-auto object-contain"
              />
            ) : (
              <div className="text-gray-400 text-center p-8">
                <p>Workflow image will appear here</p>
                <p className="text-sm mt-2">Please provide the imageUrl prop</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default CombinedWorkflowLayout;