import React from 'react';
import { Img } from 'remotion';
import type { SlackSender } from '../../slack-types';
import { SENDER_CONFIGS } from '../../slack-types';

interface SlackAvatarProps {
  sender: SlackSender;
  size: number;
}

export const SlackAvatar: React.FC<SlackAvatarProps> = ({ sender, size }) => {
  const config = SENDER_CONFIGS[sender];
  const borderRadius = size * 0.22;

  if (config.avatarPhoto) {
    return (
      <Img
        src={config.avatarPhoto}
        style={{
          width: size,
          height: size,
          borderRadius,
          objectFit: 'cover',
          flexShrink: 0,
        }}
      />
    );
  }

  // Fallback: colored initials
  const fontSize = size * 0.38;
  const isEmoji = /\p{Emoji}/u.test(config.initials);

  return (
    <div
      style={{
        width: size,
        height: size,
        borderRadius,
        backgroundColor: config.avatarColor,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexShrink: 0,
        overflow: 'hidden',
      }}
    >
      <span
        style={{
          fontSize: isEmoji ? size * 0.55 : fontSize,
          fontWeight: isEmoji ? 400 : 700,
          color: '#FFFFFF',
          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
          lineHeight: 1,
          userSelect: 'none',
        }}
      >
        {config.initials}
      </span>
    </div>
  );
};