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

export type ChatBubblePositionValue = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'

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

/**
 * Template: PositionSelect
 * Canonical dropdown for chat bubble position.
 */
export function PositionSelect({
  label = t('Position'),
  value,
  onChange,
  disabled = false,
  description,
}: PositionSelectProps) {
  return (
    <SelectField
      label={label}
      value={value}
      onChange={(v) => onChange(v as ChatBubblePositionValue)}
      disabled={disabled}
      description={description}
      options={[
        { value: 'bottom-right', label: t('Bottom Right') },
        { value: 'bottom-left', label: t('Bottom Left') },
        { value: 'top-right', label: t('Top Right') },
        { value: 'top-left', label: t('Top Left') },
      ]}
    />
  )
}

export default PositionSelect

