MetatronLatestWebsite/src/components/home/MedicalServicesCircle.tsx

"use client";

import React, { useState, useEffect } from 'react';
import Link from 'next/link';

interface ServiceItem {
    id: number;
    icon: string;
    title: string;
    text: string;
}

const services: ServiceItem[] = [
    {
        id: 0,
        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-1.jpg", // Using logical equivalents
        title: "Excellent infection prevention",
        text: "Lorem ipsum dolor sit amet, conse ctetur adipiscing eliteiusmod tempor incididunt"
    },
    {
        id: 1,
        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-2.jpg",
        title: "Health patients comprehensive",
        text: "From its medieval origins to the digital era , learn everything there is to know"
    },
    {
        id: 2,
        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-3.jpg",
        title: "Pediatric Hematology Oncology",
        text: "Creation timelines for the standard lorem ipsum passage vary, with some citing the"
    },
    {
        id: 3,
        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-4.jpg",
        title: "Care Pediatric & Medicine",
        text: "Letraset's dry-transfer sheets, and later entered the digital world via Aldus"
    },
    {
        id: 4,
        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-5.jpg",
        title: "Labor & Delivery: The Birthplace",
        text: "Some claim lorem ipsum threatens to promote design over content, while others defend"
    },
    {
        id: 5,
        icon: "https://bracketweb.com/pelocishtml/assets/images/resources/service-1-6.jpg",
        title: "Urogynecology & Pelvic Health",
        text: "Generally, lorem ipsum is best suited to keeping templates from looking bare or"
    }
];

const MedicalServicesCircle: React.FC = () => {
    const [activeTab, setActiveTab] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setActiveTab((prev) => (prev + 1) % services.length);
        }, 5000);
        return () => clearInterval(interval);
    }, []);

    const handleTabClick = (e: React.MouseEvent, id: number) => {
        e.preventDefault();
        setActiveTab(id);
    };

    return (
        <section className="medical-services-circle space" style={{ backgroundImage: 'url(https://bracketweb.com/pelocishtml/assets/images/backgrounds/video-one-bg.jpg)' }}>
            <div className="container">
                <div className="section-title text-center">
                    <h2 className="sec-title h1">Medical <span className="inner-text">Services</span></h2>
                    <p className="sec-text">Search or browse by hospital, treatment or consultant to see what can do for you</p>
                    <div className="sec-icon2">
                        <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/sec-title-shape-1.png" alt="icon" />
                    </div>
                </div>

                <div className="service-circle">
                    <div className="service-circle__lines">
                        <div className="line"></div>
                        <div className="line"></div>
                        <div className="line"></div>
                        <div className="line"></div>
                    </div>

                    <nav className="service-circle__menu">
                        <ul>
                            {services.map((service, index) => (
                                <li
                                    key={service.id}
                                    className={activeTab === service.id ? 'active' : ''}
                                    style={{ '--rotate-item': `${index * 60}deg` } as React.CSSProperties}
                                >
                                    <a href="#" onClick={(e) => handleTabClick(e, service.id)}>
                                        <img
                                            src={service.icon}
                                            alt="icon"
                                            style={{
                                                '--rotate-icon': `-${index * 60}deg`,
                                                '--icon-left': index === 2 || index === 3 ? '46%' : index === 4 ? '48%' : '50%',
                                                '--icon-top': index === 2 ? '34%' : '35%'
                                            } as React.CSSProperties}
                                        />
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </nav>

                    <div className="service-circle__center">
                        {services.map((service) => (
                            <div
                                key={service.id}
                                className={`service-circle__item ${activeTab === service.id ? 'active' : ''}`}
                            >
                                <div className="service-circle__item-inner">
                                    <h3 className="service-circle__title h4">
                                        <Link href="/service-details">{service.title}</Link>
                                    </h3>
                                    <p className="service-circle__text">{service.text}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default MedicalServicesCircle;