"use client";
import Image from "next/image";
export interface CardTeamProps {
  data: {
    name: string;
    role: string;
    img: { url: string };
  };
}

export function CardTeam({ data }: CardTeamProps) {
  return (
    <div className="col-md-4 mt-40">
      <div className="team-item">
        <div className="team-item-image">
          <Image
            src={data.img.url}
            width={625}
            height={767}
            className="wow scaleOutIn"
            data-wow-duration="1.2s"
            alt={`Image of ${data.name}`}
          />
          <div className="team-item-detail">
            <div className="team-social-links">
              {[
                { platform: "Facebook", icon: "fa-facebook-f", url: "#" },
                { platform: "Twitter", icon: "fa-twitter", url: "#" },
                { platform: "Pinterest", icon: "fa-pinterest-p", url: "#" },
              ].map((social, idx) => (
                <a key={idx} href={social.url} target="_blank" rel="noopener nofollow">
                  <div className="visually-hidden">{social.platform}</div>
                  <i className={social.icon} />
                </a>
              ))}
            </div>
          </div>
        </div>
        <div className="team-item-descr">
          <div className="team-item-name">{data.name}</div>
          <div className="team-item-role">{data.role}</div>
        </div>
      </div>
    </div>
  );
}