import { useMemo } from 'react'
import { Icon } from '$core-components'
import './Checkbox.scss'

const Checkbox = ({
	checked = false,
	onChange,
	label = '',
	id,
	name,
	className = '',
	disabled = false,
	checkIcon = 'check_white.svg',
	children,
	...restProps
}) => {
	const handleChange = (e) => {
		if (!disabled && onChange) {
			onChange(e)
		}
	}

	const checkboxId = useMemo(() => {
		return id || `checkbox-${Math.random().toString(36).substr(2, 9)}`
	}, [id])

	return (
		<div className={`checkbox-wrapper ${className}`}>
			<label htmlFor={checkboxId} className={disabled ? 'disabled' : ''}>
				<input
					type='checkbox'
					id={checkboxId}
					name={name}
					checked={checked}
					onChange={handleChange}
					disabled={disabled}
					{...restProps}
				/>
				<Icon
					width='22px'
					height='22px'
					name={checkIcon}
					wrapperClassName='checkbox-icon'
					ariaHidden="true"
				/>
				{(label || children) && (
					<span className='checkbox-label'>
						{children ||label}
					</span>
				)}
			</label>
		</div>
	)
}

export default Checkbox

