interface AchievementsProps {
    data: {
        heading: string;
        subheading: string;
        items: {
            value: string;
            suffix: string;
            label: string;
            description: string;
        }[];
    };
}

const Achievements = ({ data }: AchievementsProps) => {
    return (
        <section className="counter-section section-padding pb-0 fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg-2.jpg')" }}>
            <div className="shape">
                <img src="/assets/img/home-1/feature/shape-2.png" alt="img" />
            </div>
            <div className="container">
                <div className="section-title text-center">
                    <span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
                    <h2 className="text-white split-text-right split-text-in-right">
                        {data.heading}
                    </h2>
                </div>
            </div>
            <div className="counter-wrapper">
                <div className="container">
                    <div className="counter-main-item">
                        {data.items.map((item, index) => (
                            <div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
                                <h2><span className="odometer" data-count={item.value}>00</span>{item.suffix}</h2>
                                <h5>{item.label}</h5>
                                <p>
                                    {item.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default Achievements;