import Link from 'next/link';

interface WhyChooseUsProps {
    data: {
        heading: string;
        highlightWord?: string;
        subheading: string;
        description: string;
        mainImage?: string;
        secondaryImage?: string;
        items: {
            icon: string;
            title: string;
            description: string;
        }[];
        features: string[];
        ctaButton: {
            label: string;
            href: string;
        };
    };
}

const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
    const highlight = data.highlightWord?.trim();

    let headingContent: React.ReactNode = data.heading;

    if (highlight) {
        const index = data.heading.indexOf(highlight);
        if (index !== -1) {
            const before = data.heading.slice(0, index);
            const after = data.heading.slice(index + highlight.length);
            headingContent = (
                <>
                    {before}
                    <span>{highlight}</span>
                    {after}
                </>
            );
        }
    }

    return (
        <section className="about-section section-padding fix pb-0">
            <div className="top-shape">
                <img src="/assets/img/home-1/about/globe.png" alt="img" />
            </div>
            <div className="container">
                <div className="about-wrapper">
                    <div className="row g-4">
                        <div className="col-lg-6">
                            <div className="about-image">
                                <img src={data.mainImage || "/assets/img/home-1/about/about-1.jpg"} alt="img" className="wow img-custom-anim-left" />
                                <div className="about-image-2">
                                    <img src={data.secondaryImage || "/assets/img/home-1/about/about-02.jpg"} alt="img" className="wow img-custom-anim-right" />
                                </div>
                                <div className="bg-shape">
                                    <img src="/assets/img/home-1/about/Vector.png" alt="img" />
                                </div>
                                <div className="plane-shape float-bob-y">
                                    <img src="/assets/img/home-1/about/plane.png" alt="img" />
                                </div>
                                <div className="top-shape float-bob-y">
                                    <img src="/assets/img/home-1/about/shape.png" alt="img" />
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6">
                            <div className="about-content">
                                <div className="section-title mb-0">
                                    <span className="sub-title wow fadeInUp">{data.subheading}</span>
                                    <h2 className="split-text-right split-text-in-right">
                                        {headingContent}
                                    </h2>
                                </div>
                                <p className="text wow fadeInUp" data-wow-delay=".3s">
                                    {data.description}
                                </p>
                                <div className="about-item wow fadeInUp" data-wow-delay=".5s">
                                    {data.items.map((item, index) => (
                                        <div key={index} className="content">
                                            <span><img src={item.icon} alt="" /> {item.title}-</span>
                                            <p>{item.description}</p>
                                        </div>
                                    ))}
                                </div>
                                <ul className="list wow fadeInUp" data-wow-delay=".3s">
                                    {data.features.map((feature, index) => (
                                        <li key={index}>
                                            <i className="fa-solid fa-chevrons-right"></i>
                                            {feature}
                                        </li>
                                    ))}
                                </ul>
                                <Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".5s">
                                    {data.ctaButton.label}
                                    <i className="fa-solid fa-arrow-right"></i>
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default WhyChooseUs;