import React from 'react';
import { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';
import { SLACK } from '../../lib/slack-colors';
import type { SlackReaction } from '../../slack-types';

interface SlackReactionPillProps {
  reaction: SlackReaction;
  scale: number;
}

export const SlackReactionPill: React.FC<SlackReactionPillProps> = ({ reaction, scale }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = spring({
    frame,
    fps,
    config: { damping: 10, stiffness: 280, mass: 0.6 },
  });

  const scaleAnim = interpolate(progress, [0, 1], [0.5, 1]);
  const opacity = interpolate(progress, [0, 0.3], [0, 1], { extrapolateRight: 'clamp' });

  const fontSize = Math.round(13 * scale);
  const paddingV = Math.round(3 * scale);
  const paddingH = Math.round(7 * scale);
  const borderRadius = Math.round(4 * scale);
  const gap = Math.round(4 * scale);

  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap,
        backgroundColor: SLACK.reactionBg,
        border: `1px solid ${SLACK.reactionBorder}`,
        borderRadius,
        padding: `${paddingV}px ${paddingH}px`,
        transform: `scale(${scaleAnim})`,
        opacity,
        transformOrigin: 'left center',
      }}
    >
      <span style={{ fontSize: Math.round(14 * scale), lineHeight: 1 }}>{reaction.emoji}</span>
      {reaction.count > 1 && (
        <span
          style={{
            fontSize,
            fontWeight: 500,
            color: SLACK.reactionText,
            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
          }}
        >
          {reaction.count}
        </span>
      )}
    </div>
  );
};