import React from 'react';

const MetatranscriptomicsPipeline = ({
  title = "Bioinformatics Pipeline",
  svgContent = null, // Pass your SVG content here as JSX
  svgUrl = "/images/flowchart/metatranscriptomicsrna.svg",
  backgroundColor = "bg-gray-50",
  textColor = "text-gray-700",
  className = "",
  titleClassName = "",
  svgClassName = "",
  containerClassName = ""
}) => {
  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 ${containerClassName}`}>
        <h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
          {title}
        </h2>

        {/* SVG Flowchart Container */}
        <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-6xl">
              {/* SVG Container with responsive sizing */}
              <div className={`w-full ${svgClassName}`}>
                {svgUrl ? (
                  // If SVG URL/path is provided
                  <img 
                    src={svgUrl} 
                    alt="Flowchart diagram"
                    className="w-full h-auto object-contain"
                  />
                ) : svgContent ? (
                  // If SVG content is provided as JSX
                  <div className="w-full">
                    <div className="w-full">
                      {svgContent}
                    </div>
                  </div>
                ) : (
                  // Fallback message
                  <div className="flex items-center justify-center h-40 text-gray-500">
                    <p>Please provide SVG content or URL</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default MetatranscriptomicsPipeline;