uldp.edu.vn/app/components/about/AboutStats.tsx

import { AboutData } from '../../about/types';

interface AboutStatsProps {
    data: AboutData['stats'];
}

const AboutStats = ({ data }: AboutStatsProps) => {
    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">Did You Know</span>
                    <h2 className="text-white split-text-right split-text-in-right">
                       Our Achievements in Numbers
                    </h2>
                </div>
            </div>
            <div className="counter-wrapper">
                 <div className="container">
                    <div className="counter-main-item">
                        {data.map((stat, index) => {
                            // Helper to extract number and suffix from value
                            const valueStr = String(stat.value);
                            const numericMatch = valueStr.match(/(\d+)/);
                            const numericValue = numericMatch ? numericMatch[0] : "0";
                            const suffix = valueStr.replace(numericValue, "");

                            return (
                                <div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
                                    <h2><span className="odometer" data-count={numericValue}>00</span>{suffix}</h2>
                                    <h5>{stat.label}</h5>
                                </div>
                            );
                        })}
                    </div>
                 </div>
            </div>
        </section>
    );
};

export default AboutStats;