import { m } from "framer-motion";
import dynamic from "next/dynamic";

import SplitText from "@/components/split-text";
import { unwrapArray } from "@/helpers/array";
import type { Investor, TeamMember } from "@/types";

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

const AudioPlayer = dynamic(
  () => import("@/components/audio-player").then((mod) => mod.default),
  { ssr: false },
);

type TeamCardProps = TeamMember & Investor;

const TeamCard = ({ id, name, role, song }: TeamCardProps) => {
  return (
    <m.div id={id} className={styles.teamCard}>
      <div className={styles.inner}>
        <div className={styles.text}>
          <SplitText as="p" className={styles.name} triggerOnce={true}>
            {name}
          </SplitText>
          {role && (
            <SplitText as="p" className={styles.role} triggerOnce={true}>
              {role}
            </SplitText>
          )}
        </div>
        {song && (
          <AudioPlayer
            id={song.id}
            src={song.src}
            title={song.title ?? unwrapArray(song?.src)}
          />
        )}
      </div>
    </m.div>
  );
};

export default TeamCard;