import React from 'react';

const CombinedWorkflowLayout = ({ 
  introTitle = "Introduction and Workflow",
  advantageTitle = "Advantage",
  introItems = [],
  advantageItems = [],
  imageUrl,
  imageAlt = "Workflow diagram"
}) => {
  return (
    <div className="w-full bg-white">
      {/* Main container with two columns */}
      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
        
        {/* Left Column - Content */}
        <div className="px-6 lg:px-12 py-8">
          {/* Introduction Section */}
          <section className="mb-8">
            <h2 className="text-3xl font-bold text-teal-700 mb-4">
              {introTitle}
            </h2>
            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg: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">{item}</span>
                </li>
              ))}
            </ul>
          </section>

          {/* Advantage Section */}
          <section>
            <h2 className="text-3xl font-bold text-teal-700 mb-4">
              {advantageTitle}
            </h2>
            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg: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">{item}</span>
                </li>
              ))}
            </ul>
          </section>
        </div>

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

export default CombinedWorkflowLayout;