/**
 * ExpertAvatar Component
 *
 * Displays expert avatar (image or initials) with optional animation.
 */

import React from 'react';
import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import { darkPalette } from '../lib/colors';

type ExpertAvatarProps = {
  name: string;
  avatarUrl?: string;
  size?: 'small' | 'medium' | 'large';
  animate?: boolean;
};

const SIZES = {
  small: 64,
  medium: 96,
  large: 140,
};

export const ExpertAvatar: React.FC<ExpertAvatarProps> = ({
  name,
  avatarUrl,
  size = 'medium',
  animate = false,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const initials = name
    .split(' ')
    .map((n) => n[0])
    .join('')
    .slice(0, 2)
    .toUpperCase();

  const px = SIZES[size];

  // Animation
  let scale = 1;
  let opacity = 1;

  if (animate) {
    const springValue = spring({
      frame,
      fps,
      config: { damping: 12, stiffness: 100 },
    });
    scale = interpolate(springValue, [0, 1], [0.8, 1]);
    opacity = interpolate(frame, [0, 10], [0, 1], { extrapolateRight: 'clamp' });
  }

  const style: React.CSSProperties = {
    width: px,
    height: px,
    borderRadius: '50%',
    transform: `scale(${scale})`,
    opacity,
  };

  if (avatarUrl) {
    return (
      <img
        src={avatarUrl}
        alt={name}
        style={{ ...style, objectFit: 'cover' }}
      />
    );
  }

  return (
    <div
      style={{
        ...style,
        backgroundColor: darkPalette.primary,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <span
        style={{
          color: darkPalette.accent,
          fontWeight: 700,
          fontSize: px * 0.35,
        }}
      >
        {initials}
      </span>
    </div>
  );
};
