"use client"
import { OptimizedImage } from "@/components/optimized-image"

interface ExperienceItem {
  emoji: string
  title: string
  description: string
  color: string
}

interface ExperienceSectionProps {
  experiences: ExperienceItem[]
}

export function ExperienceSection({ experiences }: ExperienceSectionProps) {
  return (
    <section className="relative -mt-25 md:-mt-10 z-10 pb-16">
      <div className="max-w-6xl mx-auto px-3 md:px-6">
        <div className="bg-white rounded-lg shadow-sm p-4 lg:p-6">
          <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
            <div className="lg:col-span-1">
              <h2
                className="text-xl lg:text-2xl font-bold"
                style={{ color: "#0D8B4D" }}
              >
                Experience Alegre Farms
              </h2>
            </div>

            <div className="lg:col-span-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {experiences.map((experience, index) => {
                return (
                  <div
                    key={index}
                    className="flex flex-col items-start gap-3"
                  >
                    <OptimizedImage
                      src={experience.emoji}
                      alt={experience.title}
                      width={46}
                      height={46}
                    />
                    <div>
                      <h2 className="font-semibold text-[#002E62] mb-1">
                        {experience.title}
                      </h2>
                      <p className="text-[0.77rem] text-gray-600 leading-snug">
                        {experience.description}
                      </p>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}