import Link from 'next/link';

interface VisaCountriesProps {
    data: {
        heading: string;
        subheading: string;
        description: string;
        countries: {
            name: string;
            code: string;
            flag: string;
            link: string;
            visaTypes: string[];
        }[];
        ctaButton: {
            label: string;
            href: string;
        };
    };
}

const VisaCountries = ({ data }: VisaCountriesProps) => {
    // Display the first country as featured
    const featuredCountry = data.countries[0];
    const halfLength = Math.ceil(featuredCountry.visaTypes.length / 2);
    const firstColumn = featuredCountry.visaTypes.slice(0, halfLength);
    const secondColumn = featuredCountry.visaTypes.slice(halfLength);

    return (
        <section className="feature-section section-padding fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg.png')" }}>
            <div className="container">
                <div className="feature-wrapper">
                    <div className="row g-4">
                        <div className="col-lg-6">
                            <div className="feature-content">
                                <div className="section-title mb-0">
                                    <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>
                                <p className="text wow fadeInUp" data-wow-delay=".3s">
                                    {data.description}
                                </p>
                                <div className="feature-list-item wow fadeInUp" data-wow-delay=".5s">
                                    <ul className="list">
                                        {firstColumn.map((visaType, index) => (
                                            <li key={index}>
                                                <i className="fa-solid fa-arrow-right"></i>
                                                {visaType}
                                            </li>
                                        ))}
                                    </ul>
                                    <ul className="list">
                                        {secondColumn.map((visaType, index) => (
                                            <li key={index}>
                                                <i className="fa-solid fa-arrow-right"></i>
                                                {visaType}
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                                <Link href={data.ctaButton.href} className="theme-btn">
                                    {data.ctaButton.label}
                                    <i className="fa-solid fa-arrow-right"></i>
                                </Link>
                            </div>
                        </div>
                        <div className="col-lg-6">
                            <div className="feature-image">
                                <img src={featuredCountry.flag} alt="img" />
                                <h6>{featuredCountry.code}.{featuredCountry.name}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default VisaCountries;