import React from 'react';

const SNPWorkflow = ({ 
  workflowImage = "/images/flowchart/snp_flow.svg"
}) => {
  const introItems = [
    "SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
  ];

  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]">
        
        {/* Left Column - Content */}
        <div className="px-6 lg:px-6 py-8">
          {/* Introduction Section */}
          <section>
            <h2 className="text-3xl font-bold text-teal-700 mb-4">
              Introduction and Workflow
            </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>
        </div>

        {/* Right Column - Workflow Image */}
        <div className="relative flex items-start justify-center p-4">
          <img 
            src={workflowImage}
            alt="SNP Genotyping Workflow"
            className="max-w-full min-h-90px object-contain"
          />
        </div>
      </div>
    </div>
  );
};

export default SNPWorkflow;