import { cloneElement } from 'react';
import { Button, Icon } from '@akinon/next/components';
import { AgreementAndSubmitProps } from '../types';

export const AgreementAndSubmit = ({
  agreementCheckbox,
  control,
  errors,
  buttonText,
  formError,
  isSubmitting
}: AgreementAndSubmitProps) => (
  <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
    {agreementCheckbox &&
      cloneElement(agreementCheckbox as any, {
        control: control as any,
        error: errors.agreement,
        fieldId: 'agreement'
      })}
    {formError?.non_field_errors && (
      <div className="w-full text-xs text-start px-1 mt-3 text-error">
        {formError.non_field_errors}
      </div>
    )}
    {formError?.status && (
      <div className="w-full text-xs text-start px-1 mt-3 text-error">
        {formError.status}
      </div>
    )}
    <Button
      type="submit"
      className="group uppercase mt-4 inline-flex items-center justify-center"
      disabled={isSubmitting}
      data-testid="saved-card-submit-button"
    >
      <span>{buttonText}</span>
      <Icon name="chevron-end" size={12} className="ml-2 h-3" />
    </Button>
  </div>
);