import React from 'react';
import { CardStack } from '@/components/cardStack/CardStack';

interface TeamCardTwoProps {
  members: Array<{
    id: string;
    name: string;
    role: string;
    imageSrc?: string;
  }>;
  title: string;
  description: string;
  gridVariant?: string;
  gridRowsClassName?: string;
  animationType?: string;
  textboxLayout?: string;
  useInvertedBackground?: boolean;
  [key: string]: any;
}

const TeamCardTwo: React.FC<TeamCardTwoProps> = ({
  members,
  title,
  description,
  gridVariant = 'uniform-all-items-equal',
  gridRowsClassName = '',
  animationType = 'slide-up',
  textboxLayout = 'default',
  useInvertedBackground = false,
  ...props
}) => {
  const memberItems = members.map((member) => (
    <div key={member.id} className="flex flex-col gap-4">
      {member.imageSrc && (
        <img src={member.imageSrc} alt={member.name} className="w-full rounded" />
      )}
      <p className="text-lg font-semibold">{member.name}</p>
      <p className="text-sm text-foreground/75">{member.role}</p>
    </div>
  ));

  return (
    <CardStack
      gridVariant={gridVariant}
      animationType={animationType}
      title={title}
      description={description}
      textboxLayout={textboxLayout}
      useInvertedBackground={useInvertedBackground}
      {...props}
    >
      {memberItems}
    </CardStack>
  );
};

export default TeamCardTwo;