import React from 'react';
import uniqid from 'uniqid';
import { BsCheck } from "@react-icons/all-files/bs/BsCheck";

const CheckBox = ({ className, labelClasses, label, wrapperClasses, name, ...props }) => {

    const uid = uniqid();

    return (
        <div className={['flex relative w-full', wrapperClasses].join(' ')}>
            <input type='checkbox' name={name} id={uid} className={['[&:checked+label]:before:bg-red-500 [&:checked+label]:before:border-red-500 [&:checked+label]:text-red-500 hidden  w-full bg-transparent border-b-[1px] py-2 pl-[30px] pr-4 px-5 placeholder:text-white text-base font-normal text-white focus:outline-none focus:border-b-red-500 ', className].join(' ')} {...props} />
            <label htmlFor={uid} className={['cursor-pointer after:content-check  before:w-5 before:h-5 after:w-3 after:h-3 after:absolute after:left-1 after:top-2 after:rounded-full before:absolute before:left-0 before:top-1 pl-9 relative before:bg-white before:border-[1.25px] before:border-slate-300 before:rounded-[5px] text-slate-800 text-lg font-medium', labelClasses].join(' ')}>{label}</label>
        </div>
        
    );
}

export default CheckBox;