import React from 'react';
import PropTypes from 'prop-types';
import { ReactComponent as Checked } from '../../assets/images/svg/checked.svg';
import { ReactComponent as Unchecked } from '../../assets/images/svg/unchecked.svg';

interface CheckboxProps {
    className: string;
    children: React.ReactNode;
    name: string;
    checked: boolean;
    field: {
        onChange: () => void;
    };
    onChange: () => void;
}

const Checkbox: React.FC<CheckboxProps> = ({ className, children, name, onChange, checked, field }) => (
    <label htmlFor={name} className={`c-checkbox ${className || ''}`}>
        <input
            name={name}
            id={name}
            className="c-checkbox__field"
            type="checkbox"
            checked={checked}
            {...field}
            onChange={onChange || field.onChange}
        />

        <div className="c-checkbox__indicator">
            {checked ? (
                <Checked className="c-checkbox__icon" />
            ) : (
                <Unchecked className="c-checkbox__icon" />
            )}
        </div>
        <div className="c-checkbox__text">{children}</div>
    </label>
);

export default Checkbox;