import { projects } from "@/data/projects";
import React from "react";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import Link from "next/link";
export default function Projects() {
  return (
    <section className="project-section section-padding fix">
      <div className="container">
        <div className="section-title text-center">
          <h6 className="wow fadeInUp">
            <i className="fa-regular fa-arrow-left-long" />
            Who we are
            <i className="fa-regular fa-arrow-right-long" />
          </h6>
          <h2 className="splt-txt wow">
            <AnimatedText text="Delivers Custom Food" />
            <br />
            <AnimatedText text="Processing Solutions" />
          </h2>
        </div>
        <div className="row g-4">
          {projects.map((project) => (
            <div
              key={project.id}
              className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
              data-wow-delay={project.delay}
            >
              <div className="project-card-items">
                <div className="project-image">
                  {project.images.map((image, index) => (
                    <Image
                      key={index}
                      width={370}
                      height={331}
                      src={image}
                      alt="img"
                    />
                  ))}
                </div>
                <div className="project-content">
                  <h3>
                    <Link href={`/project-details/${project.id}`}>
                      {project.title}
                    </Link>
                    <Link
                      href={`/service-details/${project.id}`}
                      className="link-btn"
                    >
                      <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                  </h3>
                  <p>{project.description}</p>
                </div>
                <div className="shape-img">
                  <Image
                    src="/assets/img/project/shape.png"
                    width={57}
                    height={54}
                    alt="img"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}