import React from 'react';
import { VRMA_FILES } from '../VrmCharacter';

const btnStyle = (active) => ({
  padding: '6px 14px',
  background: active ? 'rgba(80, 160, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)',
  color: 'white',
  border: active ? '1px solid rgba(80, 160, 255, 0.9)' : '1px solid rgba(255, 255, 255, 0.3)',
  borderRadius: '6px',
  cursor: 'pointer',
  fontSize: '12px',
  backdropFilter: 'blur(4px)',
});

export default function AnimationUI({ selectedAnimation, onSelect }) {
  return (
    <div style={{ position: 'absolute', bottom: 20, left: 20, zIndex: 100, display: 'flex', gap: 6, flexWrap: 'wrap', maxWidth: '80vw' }}>
      {VRMA_FILES.map((v) => (
        <button key={v.name} onClick={() => onSelect(v.name)} style={btnStyle(selectedAnimation === v.name)}>
          {v.name}
        </button>
      ))}
    </div>
  );
}