const SNPGenotypingTechniques = ({ 
  title = "Types of SNP-Based Genotyping using technique:",
  backgroundColor = "bg-teal-50"
}) => {
  const techniques = [
    {
      name: "PCR:",
      description: "Utilizes PCR to amplify DNA regions containing SNPs, relying on allele-specific primers, probes, or melting curve differences for SNP detection.",
      examples: "TaqMan Assay, KASP, ARMS-PCR, qPCR, High-Resolution Melting (HRM)."
    },
    {
      name: "Microarray:",
      description: "Employs DNA microarrays to detect and analyze SNPs across the genome using hybridization with oligonucleotide probes specific to SNP loci.",
      examples: "Affymetrix GeneChips, Illumina Infinium Arrays, SNPlex, Axiom Array Platforms, MALDI-TOF Mass Spectrometry Arrays."
    },
    {
      name: "NGS:",
      description: "Uses Next-Generation Sequencing (NGS) for high-resolution, high-throughput SNP detection and analysis.",
      examples: "Whole-Genome Sequencing (WGS), Exome Sequencing, Targeted Sequencing, Genotyping-by-Sequencing (GBS), Double Digest Restriction-site Associated DNA (ddRAD) Sequencing."
    }
  ];

  return (
    <section className={`py-5 lg:py-5 mb-6 ${backgroundColor}`}>
      <div className="container-fluid px-4 lg:px-6">
        <h2 className="text-3xl font-bold text-teal-700 mb-4">
          {title}
        </h2>
        
        <ol className="space-y-4 lg:px-6" style={{color: '#555555'}}>
          {techniques.map((technique, index) => (
            <li key={index} className="leading-relaxed">
              <div className="flex items-start">
                <span 
                  className="inline-flex items-center justify-center w-6 h-6 rounded-full text-white font-bold text-sm mr-3 flex-shrink-0 mt-0.5"
                  style={{backgroundColor: '#faae31'}}
                >
                  {index + 1}
                </span>
                <div className="flex-1">
                  <span className="font-semibold text-base">{technique.name}</span>
                  <br />
                  <span className="text-base">{technique.description}</span>
                  <br />
                  <span className="font-semibold" style={{color: '#faae31'}}>Examples: </span>
                  <span className="text-base italic">{technique.examples}</span>
                </div>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

export default SNPGenotypingTechniques;