import React, { useRef } from 'react';
import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation';

interface TeamMember {
  id: string;
  name: string;
  role: string;
  image?: string;
}

interface TeamCardFiveProps {
  members: TeamMember[];
  containerClassName?: string;
}

export const TeamCardFive: React.FC<TeamCardFiveProps> = ({ members, containerClassName = '' }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);

  const animationOptions: UseCardAnimationOptions = {
    containerRef,
    itemRefs,
  };

  const { } = useCardAnimation(animationOptions);

  return (
    <div ref={containerRef} className={containerClassName}>
      {members.map((member) => (
        <div key={member.id} className="team-member">
          <h3>{member.name}</h3>
          <p>{member.role}</p>
        </div>
      ))}
    </div>
  );
};

export default TeamCardFive;
