'use client'
import { useState } from "react";

export default function ClinicalAreasGrid() {
  const areas = [
    { name: "Cardiovascular", icon: "/images/icons/cardio.png" },
    { name: "Dermatology", icon: "/images/icons/dermatology.png" },
    { name: "Dysmorphology", icon: "/images/icons/dysmorphology.png" },
    { name: "Ear, Nose, and Throat", icon: "/images/icons/ent.png" },
    { name: "Endocrinology", icon: "/images/icons/endocrinology.png" },
    { name: "Hematology", icon: "/images/icons/hematology.png" },
    { name: "Immunology", icon: "/images/icons/immunology.png" },
    { name: "Metabolic Disorders", icon: "/images/icons/metabolic.png" },
    { name: "Nephrology", icon: "/images/icons/nephrology.png" },
    { name: "Neurology", icon: "/images/icons/neurology.png" },
    { name: "Oncology", icon: "/images/icons/oncology.png" },
    { name: "Ophthalmology", icon: "/images/icons/ophthalmology.png" },
    { name: "Osteology", icon: "/images/icons/osteology.png" },
    { name: "Pneumology", icon: "/images/icons/pneumology.png" },
    { name: "Reproductive Health", icon: "/images/icons/reproductive.png" },
  ];

  return (
    <section className="mx-auto px-8 pt-8">
      <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Clinical Areas</h2>
      <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {areas.map((area, idx) => (
          <div
            key={idx}
            className="flex items-center gap-3 rounded-lg p-4 shadow-sm"
            style={{ backgroundColor: '#f2fcfc' }}
          >
            <img src={area.icon} alt={area.name} className="w-6 h-6" />
            <span className="text-gray-600 leading-relaxed text-base">{area.name}</span>
          </div>
        ))}
      </div>
    </section>
  );
}