export type HomeWhyChooseItem = {
    title: string;
    text: string;
    iconUrl: string;
};

export function HomeWhyChoose({ items }: { items: HomeWhyChooseItem[] }) {
    if (items.length === 0) {
        return null;
    }

    return (
        <>
                <section className="why-choose-section-1 pt-100 md-pt-80 pb-80 md-pb-50">
                    <div className="container">
                        <div className="row">
                            {items.map((item, index) => (
                                <div className="col-xl-4 col-lg-6 col-md-6" key={item.title}>
                                    <div className="why-choose-item wow fadeInUp" data-wow-delay={`.${index + 2}s`}>
                                        <div className="why-choose-icon">
                                            <figure>
                                                <img src={item.iconUrl} alt="" />
                                            </figure>
                                        </div>
                                        <div className="why-choose-content">
                                            <h2 className="why-choose-title line-anime-center">{item.title}</h2>
                                            {item.text !== '' && <p>{item.text}</p>}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>
        </>
    );
}