import { Link } from '@inertiajs/react';

export type HomeFacility = {
    name: string;
    iconUrl: string;
};

export function HomeFacilities({ facilities }: { facilities: HomeFacility[] }) {
    if (facilities.length === 0) {
        return null;
    }

    return (
        <>
                <section className="facilities-section-2">
                    <div className="facilities-shape-top">
                        <figure>
                            <img src="/assets/images/shape/shape-two-bottom.png" alt="facilities shape two bottom" />
                        </figure>
                    </div>
                    <div className="facilities-wapper pt-100 md-pt-80 pb-70 md-pb-50">
                        <div className="container">
                            <div className="row justify-content-between">
                                <div className="col-lg-12">
                                    <div className="section-title section-title-white text-center wow fadeInUp" data-wow-delay=".2s">
                                        <span className="sub-title">Facilities</span>
                                        <h2>Hotel&apos;s Facilities</h2>
                                    </div>
                                </div>
                            </div>
                            <div className="row justify-content-center">
                                {facilities.map((facility, index) => (
                                    <div className="col-xl-3 col-lg-4 col-md-4 col-sm-6" key={facility.name}>
                                        <Link href="/updates" className="facilities-item wow fadeInUp" data-wow-delay={`.${index + 3}s`}>
                                            <div className="facilities-icon">
                                                <figure>
                                                    <img src={facility.iconUrl} alt="" />
                                                </figure>
                                            </div>
                                            <div className="facilities-content">
                                                <h3 className="facilities-title line-anime-center">{facility.name}</h3>
                                            </div>
                                        </Link>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </section>
        </>
    );
}