/**
 * TileOption Component
 *
 * Selectable option tile with hover/select states for question scenes.
 */

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

type TileOptionProps = {
  label: string;
  isSelected: boolean;
  delayFrames?: number;
  selectionProgress?: number;
};

export const TileOption: React.FC<TileOptionProps> = ({
  label,
  isSelected,
  delayFrames = 0,
  selectionProgress = 0,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Stagger animation for appearance
  const enterProgress = spring({
    frame: frame - delayFrames,
    fps,
    config: { damping: 15, stiffness: 120 },
  });

  const opacity = interpolate(enterProgress, [0, 1], [0, 1]);
  const translateY = interpolate(enterProgress, [0, 1], [20, 0]);

  // Selection animation (scale bounce)
  const selectionScale = isSelected
    ? interpolate(selectionProgress, [0, 0.5, 1], [1, 1.08, 1])
    : 1;

  const backgroundColor = isSelected
    ? darkPalette.primary
    : darkPalette.surfaceElevated;

  const borderColor = isSelected ? darkPalette.accent : darkPalette.border;

  return (
    <div
      style={{
        opacity,
        transform: `translateY(${translateY}px) scale(${selectionScale})`,
        backgroundColor,
        border: `2px solid ${borderColor}`,
        borderRadius: 9999,
        padding: '20px 36px',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <span
        style={{
          color: darkPalette.text,
          fontSize: 28,
          fontWeight: 500,
          whiteSpace: 'nowrap',
        }}
      >
        {label}
      </span>
    </div>
  );
};
