import {
  Star, Wind, Anchor, Utensils, BedDouble, Sun,
  Waves, Bike, Coffee, Music, MapPin, Camera, Heart, Compass,
  Fish, Mountain, Dumbbell, Leaf, Shield, Umbrella, Flame,
  type LucideIcon,
} from "lucide-react";

const ICON_MAP: Record<string, LucideIcon> = {
  Wind, Anchor, Utensils, BedDouble, Sun, Star, Waves, Bike,
  Coffee, Music, MapPin, Camera, Heart, Compass, Fish, Mountain,
  Dumbbell, Leaf, Shield, Umbrella, Flame,
};

interface Feature {
  icon: string | null;
  label: string;
  sub: string;
}

interface FeaturesStripProps {
  features: Feature[];
}

export default function FeaturesStrip({ features }: FeaturesStripProps) {
  return (
    <section className="bg-dark text-white py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 md:grid-cols-5 divide-x divide-white/8">
          {features.map(({ icon, label, sub }, i) => {
            const IconComponent = ICON_MAP[icon as string] || Star;
            return (
              <div
                key={i}
                className={`flex flex-col items-center justify-center gap-2 py-6 px-4 group ${i >= 2 ? "hidden md:flex" : ""}`}
              >
                <IconComponent className="w-5 h-5 text-accent group-hover:scale-110 transition-transform duration-300" />
                <span className="text-[13px] font-semibold text-center">{label}</span>
                <span className="text-[11px] text-white/40 text-center">{sub}</span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}