import type { PortfolioLayout3Content } from "@/data/portfolio-layout3";
import Layout3Image from "./Layout3Image";

export default function Layout3AgencyFeatures({
  data,
}: {
  data: PortfolioLayout3Content["features"];
}) {
  return (
    <div className="title-info v2 space-bottom">
      <div className="row">
        <div className="col-lg-5">
          <div
            className="sec-title2"
            data-aos="fade-right"
            data-aos-duration={900}
            data-aos-delay={data.aosDelay}
          >
            <h2 className="title3">{data.leftTitle}</h2>
          </div>
        </div>
        <div className="col-lg-7">
          <div
            className="sec-title2 v2"
            data-aos="fade-left"
            data-aos-duration={900}
            data-aos-delay={data.aosDelay}
          >
            <p>{data.paragraph}</p>
            <ul className="digital-list">
              {data.list.map((item) => (
                <li key={item.id}>
                  <Layout3Image
                    src={data.checkIconSrc}
                    alt={data.checkIconAlt}
                    width={data.checkIconWidth}
                    height={data.checkIconHeight}
                  />
                  {item.text}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}