import { useTranslation } from 'react-i18next';
import { useQrState } from '../store/qrContext';
import { useQrEncode } from '../hooks/useQrEncode';
import { buildSmsText } from '../utils/qrText';

export default function SmsMode() {
  const { t } = useTranslation();
  const { state, dispatch } = useQrState();
  const { encode } = useQrEncode();

  const update = (field: string, value: string) => {
    const data = { ...state.formData, [field]: value };
    dispatch({ type: 'SET_FORM_DATA', payload: data });
    encode(buildSmsText(data));
  };

  return (
    <div className="flex gap-2 items-center h-full px-4">
      <input
        placeholder={t('sms.number')}
        type="tel"
        value={state.formData.number || ''}
        onChange={(e) => update('number', e.target.value)}
        className="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"
      />
      <input
        placeholder={t('sms.message')}
        value={state.formData.message || ''}
        onChange={(e) => update('message', e.target.value)}
        className="flex-[2] px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"
      />
    </div>
  );
}