import React from 'react'

interface RequiredAttrInt {
    required: boolean;
    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
}

const RequiredAttr : React.FC<RequiredAttrInt> = ({required, handlePropertyChange}) => {
    return (
        <div className="flex justify-between items-center">
            <label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
            <input
                id="required"
                checked={required ? required : false}
                onChange={(e) => handlePropertyChange('required', e.target.checked)}
                type="checkbox"
                className="outline-none border-1 rounded px-2 py-1 border-slate-200"
            />
        </div>
    )
}

export default RequiredAttr