import { SelectField } from './SelectField'
import { t } from '@/lib/i18n'

export type ChatBubbleAnimationValue = 'none' | 'pulse' | 'bounce' | 'shake' | 'glow' | 'wiggle' | 'float'

export interface AnimationSelectProps {
  label?: string
  value: ChatBubbleAnimationValue
  onChange: (value: ChatBubbleAnimationValue) => void
  disabled?: boolean
  description?: string
}

/**
 * Template: AnimationSelect
 * Canonical dropdown for chat bubble animation.
 */
export function AnimationSelect({
  label = t('Animation'),
  value,
  onChange,
  disabled = false,
  description,
}: AnimationSelectProps) {
  return (
    <SelectField
      label={label}
      value={value}
      onChange={(v) => onChange(v as ChatBubbleAnimationValue)}
      disabled={disabled}
      description={description}
      options={[
        { value: 'none', label: t('None') },
        { value: 'pulse', label: t('Pulse') },
        { value: 'bounce', label: t('Bounce') },
        { value: 'shake', label: t('Shake') },
        { value: 'glow', label: t('Glow') },
        { value: 'wiggle', label: t('Wiggle') },
        { value: 'float', label: t('Float') },
      ]}
    />
  )
}

export default AnimationSelect

