import Link from 'next/link';

interface VisaSolutionsProps {
    data: {
        heading: string;
        subheading: string;
        items: {
            number: string;
            title: string;
            description: string;
            link: string;
        }[];
    };
}

const VisaSolutions = ({ data }: VisaSolutionsProps) => {
    return (
        <div className="service-section section-padding fix">
            <div className="container">
                <div className="section-title text-center">
                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
                    <h2 className="split-text-right split-text-in-right">
                        {data.heading}
                    </h2>
                </div>
            </div>
            {data.items.map((item, index) => (
                <div key={index} className={`service-wrapper ${index === 1 ? 'active' : ''}`}>
                    <div className="container">
                        <div className="service-item">
                            <div className="image-hover d-none d-md-block bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/hover-bg.jpg')" }}></div>
                            <div className="left-item">
                                <h5 className="number">{item.number}</h5>
                                <h3>
                                    <Link href={item.link}>{item.title}</Link>
                                </h3>
                            </div>
                            <div className="right-item">
                                <p>
                                    {item.description}
                                </p>
                                <Link href={item.link} className="service-btn">Service Details <i className="fa-solid fa-arrow-right"></i></Link>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
};

export default VisaSolutions;