interface CompanyMilestonesProps {
    data: {
        title: string;
        items: Array<{
            year: string;
            title: string;
            description: string;
        }>;
    };
}

export default function CompanyMilestones({ data }: CompanyMilestonesProps) {
    return (
        <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="tm5on2x">
            <div className="max-w-6xl mx-auto" data-oid="a3fwh:i">
                <div className="text-center mb-16" data-oid="uszemd8">
                    <h2
                        className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
                        data-oid="mlv_mj4"
                    >
                        {data.title}
                    </h2>
                </div>

                <div className="relative" data-oid="huer.yt">
                    {/* Timeline line */}
                    <div
                        className="absolute left-1/2 transform -translate-x-1/2 w-0.5 h-full bg-gray-300 hidden md:block"
                        data-oid="lg7p5-v"
                    ></div>

                    <div className="space-y-12" data-oid="qsjf7lk">
                        {data.items.map((milestone, index) => (
                            <div
                                key={milestone.year}
                                className={`flex flex-col md:flex-row items-center ${
                                    index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'
                                }`}
                                data-oid="71-m4-e"
                            >
                                {/* Content */}
                                <div
                                    className={`md:w-5/12 ${
                                        index % 2 === 0
                                            ? 'md:text-right md:pr-8'
                                            : 'md:text-left md:pl-8'
                                    }`}
                                    data-oid="42s97ke"
                                >
                                    <div
                                        className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"
                                        data-oid="r4f.q12"
                                    >
                                        <div
                                            className="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium mb-3"
                                            data-oid="9kw-cq4"
                                        >
                                            {milestone.year}
                                        </div>
                                        <h3
                                            className="text-xl font-light mb-3 text-gray-900"
                                            data-oid="_0t-v-:"
                                        >
                                            {milestone.title}
                                        </h3>
                                        <p
                                            className="text-gray-600 font-light leading-relaxed"
                                            data-oid="r919o0s"
                                        >
                                            {milestone.description}
                                        </p>
                                    </div>
                                </div>

                                {/* Timeline dot */}
                                <div
                                    className="md:w-2/12 flex justify-center my-6 md:my-0"
                                    data-oid="0f1ihf3"
                                >
                                    <div
                                        className="w-6 h-6 bg-blue-600 rounded-full border-4 border-white shadow-lg relative z-10"
                                        data-oid=".he2ms6"
                                    ></div>
                                </div>

                                {/* Spacer */}
                                <div className="md:w-5/12" data-oid="6jk9dq3"></div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}