import { m } from "framer-motion";

import SplitText from "@/components/split-text";
import TeamCard from "@/components/team-card";
import type { Investor, TeamMember } from "@/types";

import styles from "./styles.module.scss";

interface TeamListProps {
  title?: string;
  data?: string;
  teamMembers: Array<TeamMember & Investor>;
}

const TeamList = ({ title, teamMembers = [] }: TeamListProps) => {
  if (!teamMembers || teamMembers.length < 1) return null;

  // Sort by `order` property if it exists, otherwise sort alphabetically
  const sortedMembers = [...teamMembers].sort((a, b) => {
    if (a.order !== undefined && b.order !== undefined) {
      return a.order - b.order;
    }
    if (a.order !== undefined) return -1; // `a` should come first
    if (b.order !== undefined) return 1; // `b` should come first
    // Fallback to alphabetical order
    return a.name.localeCompare(b.name);
  });

  return (
    <m.div className={styles.teamList}>
      {title && (
        <SplitText as="h3" className={styles.title} splitBy="word">
          {title}
        </SplitText>
      )}
      <div className={styles.cardContainer}>
        {sortedMembers.map((member) => (
          <m.div key={member.id} className={styles.cardWrapper}>
            <TeamCard {...member} />
          </m.div>
        ))}
      </div>
    </m.div>
  );
};

export default TeamList;