import React from 'react';

const IsoformPipeline = ({
  title = "Bioinformatics Pipeline",
  svgContent = null, // Pass your SVG content here as JSX
  svgUrl = "/images/flowchart/isoseqrna.svg",
  backgroundColor = "bg-gray-50",
  className = "",
  titleClassName = "",
  svgClassName = "",
  containerClassName = ""
}) => {
  return (
    <section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
      <div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
          {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 and reduced height */}
              <div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
                {svgUrl ? (
                  // If SVG URL/path is provided
                  <img 
                    src={svgUrl} 
                    alt="Flowchart diagram"
                    className="w-full h-auto object-contain max-h-100"
                  />
                ) : svgContent ? (
                  // If SVG content is provided as JSX
                  <div className="w-full max-h-100">
                    <div className="w-full max-h-100 overflow-hidden">
                      {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 IsoformPipeline;