import React from "react";
import Image from "next/image";
import Link from "next/link";
import { projectData } from "@/data/home/projectData";

const ProjectSection: React.FC = () => {
  const { subTitle, title, projects } = projectData;

  return (
    <section className="project-sec space">
      <div className="carousel-container">
        <div className="sec-title">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            {subTitle}
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            {title}
          </h2>
        </div>
        <div className="row">
          {projects.map((project) => (
            <div className={project.colClass} key={project.id}>
              <div
                className="project-card"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={project.delay}
              >
                <div className="project-img">
                  <Image
                    src={project.img}
                    alt={project.title}
                    width={500}
                    height={400}
                  />
                </div>
                <h3 className="title">
                  <Link href={project.url} title="">
                    {project.title}
                  </Link>
                </h3>
                <ul className="pro-list">
                  {project.tags.map((tag, tagIndex) => (
                    <li key={tagIndex}>
                      <span>{tag}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProjectSection;