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

const TeamSection: React.FC = () => {
  const { subTitle, title, members } = teamData;

  return (
    <section className="team-sec space-top">
      <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">
          {members.map((member) => (
            <div className="col-lg-3 col-md-6 col-sm-6" key={member.id}>
              <div
                className="team-card"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={member.delay}
              >
                <div className="team-img">
                  <Link href="/contact" title="About our team">
                    <Image
                      src={member.img}
                      alt={`${member.name}, ${member.designation}`}
                      width={300}
                      height={350}
                    />
                  </Link>
                  <ul className="social-link3">
                    {member.socialLinks.map((link) => (
                      <li key={link.id}>
                        <a href={link.url} title="">
                          <Image
                            src={link.icon}
                            alt={link.alt}
                            width={16}
                            height={16}
                          />
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="team-content">
                  {member.id === 1 ? (
                    <h3 className="name">
                      <Link href="/about" title="About our team">
                        {member.name}
                      </Link>
                    </h3>
                  ) : (
                    <h4 className="name">
                      <Link href="/about" title="About our team">
                        {member.name}
                      </Link>
                    </h4>
                  )}
                  <span className="designation">{member.designation}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TeamSection;