import React from 'react';
import clsx from 'clsx';

interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
    label?: React.ReactNode;
}

export default function Checkbox({ className, label, id, ...props }: CheckboxProps): JSX.Element {
    return (
        <label htmlFor={id} className="inline-flex items-center gap-3 text-sm text-gray-700">
            <input id={id} type="checkbox" className={clsx('ti-form-checkbox', className)} {...props} />
            {label ? <span>{label}</span> : null}
        </label>
    );
}