import React, {FC, ReactNode} from 'react';
import CheckedIcon from '@assets/svg/Checkbox';
import {Wrapper, Description} from '@styles/components/checkbox';

interface IField {
  checked: boolean;
  description?: string | ReactNode;
  onChange: (checked: boolean) => void;
  testID?: string;
}

const Field: FC<IField> = ({
  checked,
  description,
  onChange,
  testID = 'chbk',
  ...rest
}) => (
  <Wrapper {...rest} onPress={() => onChange(!checked)} testID={testID}>
    <CheckedIcon checked={checked} />

    {!!description && <Description>{description}</Description>}
  </Wrapper>
);

export default Field;