import React from 'react';
import { DeepMap, FieldError, UseFormRegister } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import RoundedButton from '../../common/RoundedButton';
import Checkbox from '../../common/Checkbox';
import { SignUpFormData } from '../../../model/components/signUp';

interface LegalProps {
  className?: string;
  register: UseFormRegister<SignUpFormData>;
  errors: DeepMap<SignUpFormData, FieldError>;
}

const Legal: React.FC<LegalProps> = ({ className, register, errors }) => {
  const { t } = useTranslation();
  return (
    <div className={`legalInfo ${className || ''}`}>
      <span className="divider" />
      <RoundedButton
        title="Ver bases legales y política de privacidad"
        size="small"
      />
      <Checkbox
        htmlFor="legalCheck"
        label="Acepto las bases legales y política de privacidad"
        errorMessage={t(errors.acceptTerms?.message)}
        error={!!errors.acceptTerms}
      >
        <input
          name="legalCheck"
          type="Checkbox"
          {...register('acceptTerms', { required: 'REQUIRED_LEGAL' })}
        />
      </Checkbox>
    </div>
  );
};

export default Legal;