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

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

export function TeamMemberInfo({ members, activeIndex, onSelect, onOpenBio }: 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-neutral-500 transition-colors hover:text-gold-dark dark:text-white/40 dark:hover:text-gold-light"
        >
          <Instagram size={14} />
          {member.instagram.split("/").filter(Boolean).pop()}
        </a>
      )}

      {(member.shortDescription || member.description) && (
        <p className="mt-3 text-sm leading-relaxed text-neutral-600 dark:text-white/55 line-clamp-3">
          {member.shortDescription || member.description}
        </p>
      )}

      <button
        onClick={onOpenBio}
        aria-label={`Подробнее о ${member.name}`}
        className="mt-3 text-sm font-medium text-gold hover:text-gold-light transition-colors cursor-pointer"
      >
        Подробнее →
      </button>

      {/* Progress dots — mobile only (desktop has carousel arrows) */}
      <div className="mt-6 flex items-center justify-center gap-2 sm:hidden">
        {members.map((m, i) => {
          const isActive = i === activeIndex;
          return (
            <button
              key={i}
              onClick={() => onSelect(i)}
              aria-label={`Перейти к ${m.name}`}
              className="relative flex items-center justify-center w-8 h-8 cursor-pointer group"
            >
              {/* Glow ring on active */}
              {isActive && (
                <span className="absolute inset-0 rounded-full bg-gold/15 scale-100 animate-pulse" />
              )}
              <span className={`relative block rounded-full transition-all duration-500 ${
                isActive
                  ? "w-3 h-3 bg-gold shadow-[0_0_8px_rgba(201,169,110,0.5)]"
                  : "w-2 h-2 bg-neutral-400 group-hover:bg-neutral-500 group-hover:scale-125 dark:bg-white/20 dark:group-hover:bg-white/40"
              }`} />
            </button>
          );
        })}
      </div>
    </div>
  );
}