import { Instagram } from "lucide-react";
import type { TeamMember } from "@/types/content";

interface TeamMemberInfoProps {
  members: TeamMember[];
  activeIndex: number;
  onSelect: (index: number) => void;
}

export function TeamMemberInfo({ members, activeIndex, onSelect }: TeamMemberInfoProps) {
  const member = members[activeIndex];

  return (
    <div
      key={activeIndex}
      className="mx-auto mt-8 max-w-lg text-center"
      style={{
        animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
      }}
    >
      {member.instagram && (
        <a
          href={member.instagram}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light"
        >
          <Instagram size={14} />
          {member.instagram.split("/").filter(Boolean).pop()}
        </a>
      )}

      {member.description && (
        <p className="mt-3 text-sm leading-relaxed text-white/55">
          {member.description}
        </p>
      )}

      {/* Progress dots */}
      <div className="mt-6 flex items-center justify-center gap-1.5">
        {members.map((_, i) => (
          <button
            key={i}
            onClick={() => onSelect(i)}
            className={`h-1.5 rounded-full transition-all duration-500 cursor-pointer ${
              i === activeIndex
                ? "w-6 bg-gold"
                : "w-1.5 bg-white/15 hover:bg-white/30"
            }`}
          />
        ))}
      </div>
    </div>
  );
}
