import Image from "next/image";

export default function SampleRequirements({ title, items }) {
  const requirements = [
    {
      icon: "/images/icons/clock.png", // Replace with your actual icon path
      title: "Turnaround Time",
      description: "21 Days"
    },
    {
      icon: "/images/icons/sample.png", // Replace with your actual icon path
      title: "Sample Requirement", 
      description: "Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot"
    }
  ];

  return (
    <section className="mx-auto px-8 pt-8 pb-12">
      <h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
      
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
        {requirements.map((req, idx) => (
          <div 
            key={idx}
            className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" 
            style={{backgroundColor: '#f2fcfc'}}
          >
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 mt-1">
                <Image
                  src={req.icon}
                  alt={req.title}
                  width={40}
                  height={40}
                  className="object-contain"
                />
              </div>
              <div className="flex-1">
                <h4 className="text-lg font-semibold text-gray-900 mb-2">{req.title}</h4>
                <p className="text-gray-500 text-sm leading-relaxed">
                  {req.description}
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}