import Link from "next/link";
import { AboutData } from "../../about/types";

interface AboutFeaturesProps {
    data: AboutData["features"];
}

const AboutFeatures = ({ data }: AboutFeaturesProps) => {
    return (
        <section
            className="choose-us-section-2 section-padding fix bg-cover"
            style={{ backgroundImage: `url(${data.backgroundImage})` }}
        >
            <div className="container">
                <div className="choose-us-wrapper-2">
                    <div className="row g-4">
                        <div className="col-lg-6">
                            <div className="choose-us-image">
                                <img src={data.image} alt="img" />
                            </div>
                        </div>
                        <div className="col-lg-6">
                            <div className="feature-content">
                                <div className="section-title mb-0">
                                    <span className="sub-title-2 wow fadeInUp">{data.subheading}</span>
                                    <h2 className="split-text-right split-text-in-right">{data.heading}</h2>
                                </div>
                                <p className="text">{data.description}</p>
                                {data.items.map((item, index) => (
                                    <div key={index} className="choose-us-box">
                                        <div className="icon">
                                            <img src={item.icon} alt="img" />
                                        </div>
                                        <div className="content">
                                            <h5>{item.title}</h5>
                                            <p>{item.description}</p>
                                        </div>
                                    </div>
                                ))}
                                <Link href={data.ctaButton.href} className="theme-btn">
                                    {data.ctaButton.label}
                                    <i className="fa-solid fa-arrow-right"></i>
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default AboutFeatures;