'use client'

import { 
  ShieldCheck, 
  Bell, 
  Car, 
  BedDouble, 
  CookingPot, 
  AirVent, 
  Bed, 
  Flame, 
  Wifi,
  Video
} from 'lucide-react'

export default function Amenities({ dict }: { dict: any }) {
  const ams = [
    { icon: <Video className="w-5 h-5" />, label: dict.amenities.cctv },
    { icon: <Bell className="w-5 h-5" />, label: dict.amenities.fire_alarm },
    { icon: <Car className="w-5 h-5" />, label: dict.amenities.parking },
    { icon: <BedDouble className="w-5 h-5" />, label: dict.amenities.double_bed },
    { icon: <CookingPot className="w-5 h-5" />, label: dict.amenities.kitchen },
    { icon: <AirVent className="w-5 h-5" />, label: dict.amenities.ac },
    { icon: <Bed className="w-5 h-5" />, label: dict.amenities.single_bed },
    { icon: <Flame className="w-5 h-5" />, label: dict.amenities.fire_ext },
    { icon: <Wifi className="w-5 h-5" />, label: dict.amenities.wifi },
  ]

  return (
    <div className="py-12 border-t border-[#1A1A1A]/10">
      <h3 className="text-2xl font-serif text-[#1A1A1A] mb-10">{dict.amenities.title}</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-8 gap-x-12">
        {ams.map((item, idx) => (
          <div key={idx} className="flex items-center space-x-4 group">
            <div className="bg-[#C88C4B]/10 p-3 rounded-full text-[#C88C4B] group-hover:bg-[#C88C4B] group-hover:text-white transition-all duration-300">
              {item.icon}
            </div>
            <span className="text-lg text-[#1A1A1A]/60 font-medium group-hover:text-[#1A1A1A] transition-colors">
              {item.label}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}