import { CarFront, Bed, Utensils, Wifi, ShieldCheck, LucideIcon } from "lucide-react";

export const facilities = [
    { icon: CarFront, title: "Airport Pick-up", description: "Comfortable airport transfers available on request." },
    { icon: Bed, title: "Premium Bedding", description: "Soft linens and quality mattresses for restful sleep." },
    { icon: Utensils, title: "In-Room Dining", description: "Enjoy meals and drinks without leaving your room." },
    { icon: Wifi, title: "Free Wi-Fi", description: "High-speed internet access throughout the hotel." },
    { icon: ShieldCheck, title: "24/7 Security", description: "Safe and secure environment at all times." },
];

function Feature({ icon: Icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
    return (
        <div className="col-span-1 flex flex-col text-center items-center gap-2">
            <div className="bg-main/5 w-fit p-4 rounded-full border-4 border-main/20"> <Icon className="w-12 h-12 mx-auto text-main" />   </div>

            <h3 className="text-lg font-semibold text-gray-900">  {title}    </h3>

            <p className="font-base text-sm text-gray-600">  {description}      </p>
        </div>
    );
}


export default function Features() {
    return <section className="">
        <div className="max-w-300 mx-auto px-4 py-10 mt-8">
            <div className="grid grid-cols-5 gap-8 overflow-x-auto scrollbar-hide">

                {
                    facilities.map((item, index) => <Feature key={index} {...item} />)
                }
            </div>
        </div>
    </section>
}
