import React, { useEffect, useState } from 'react';
import { theme } from 'data/dataMx';
import { Input } from './styles';

export interface ICheckboxProps {
  /** Active if you want to active the checkbox */
  checked: boolean;
  onChange?: any;
  /** Disabled checkbox if it is active */
  disabled?: boolean;
  value?: any;
}

export const AtomCheckbox = ({ checked, onChange, disabled = false, value = '' }: ICheckboxProps) => {
  const [isChecked, setIsChecked] = useState<boolean>(checked);

  useEffect(() => {
    setIsChecked(checked);
  }, [checked]);

  const handleChange = (e: any) => {
    setIsChecked(!isChecked);
    onChange && onChange(e);
  }
  return (
    <Input
      type="checkbox"
      checked={isChecked}
      disabled={disabled}
      onChange={(e) => handleChange(e)}
      color={theme.neutral700}
      colorDisabled={theme.neutral500}
      value={value}
    />
  )
}
