import React from 'react';
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';

const SRNABioinformatics = ({
  title = "Bioinformatics Pipeline",
  leftSteps = [
    "Raw Sequencing Data (fastq files)",
    "Quality Control and Preprocessing of Data", 
    "High Quality Sequencing Data (fastq file)",
    "Blast Against mRNA, Rfam and RepBase",
    "Retained data with no annotation and remove data annotated with mRNA, Rfam and RepBase"
  ],
  rightSteps = [
    "Downstream Advanced Analysis",
    "Identification of known and Novel microRNA",
    "Hairpin Prediction", 
    "Aligned to Genome",
    "Aligned to Genome"
  ],
  backgroundColor = "bg-gray-50",
  cardColor = "bg-gray-300",
  textColor = "text-teal-600",
  arrowColor = "text-gray-600",
  className = "",
  cardClassName = "",
  titleClassName = ""
}) => {
  // Combine steps for mobile layout
  const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];

  return (
    <section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
      <div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
        <h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
          {title}
        </h2>

        {/* Pipeline Flowchart */}
        <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
          <div className="flex justify-center">
            <div className="w-full max-w-5xl">
              <div className="relative">
                {/* Mobile Layout - Single Column */}
                <div className="block sm:hidden">
                  <div className="flex flex-col items-center space-y-3">
                    {mobileSteps.map((step, index) => (
                      <React.Fragment key={index}>
                        <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
                          <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
                        </div>
                        {index < mobileSteps.length - 1 && (
                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
                        )}
                      </React.Fragment>
                    ))}
                  </div>
                </div>

                {/* Desktop Layout - Two Columns */}
                <div className="hidden sm:block">
                  <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
                    {/* Left Column */}
                    <div className="flex flex-col items-center space-y-3">
                      {leftSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < leftSteps.length - 1 && (
                            <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
                          )}
                        </React.Fragment>
                      ))}
                    </div>

                    {/* Right Column */}
                    <div className="flex flex-col items-center space-y-3">
                      {rightSteps.map((step, index) => (
                        <React.Fragment key={index}>
                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
                          </div>
                          {index < rightSteps.length - 1 && (
                            <ArrowUp className={`w-6 h-6 ${arrowColor}`} />
                          )}
                        </React.Fragment>
                      ))}
                    </div>
                  </div>

                  {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
                    <ArrowRight className={`w-8 h-8 ${arrowColor}`} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SRNABioinformatics;