import type { PortfolioLayout1Content } from "@/data/portfolio-layout1";
import Layout1Image from "./Layout1Image";

export default function Layout1AgencyFeatures({
  data,
}: {
  data: PortfolioLayout1Content["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={300}
          >
            <h4 className="title3">{data.leftTitle}</h4>
          </div>
        </div>
        <div className="col-lg-7">
          <div
            className="sec-title2 v2"
            data-aos="fade-left"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            <p>{data.paragraph}</p>
            <ul className="digital-list">
              {data.list.map((item) => (
                <li key={item.id}>
                  <Layout1Image
                    src={data.checkIconSrc}
                    alt={data.checkIconAlt}
                    width={data.checkIconWidth}
                    height={data.checkIconHeight}
                  />
                  {item.text}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}