import {HTMLAttributes, InputHTMLAttributes} from 'react';
import {ColorsNameType} from '../../../../types/entities/colors-name';

export type CheckboxSizesType = 'xs' | 'sm' | 'md';
export type CheckboxColorsType = ColorsNameType;

export interface ICheckbox
    extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    size?: CheckboxSizesType;
    disabled?: boolean;
    title?: string;
    hint?: string;
    indeterminate?: boolean;
    checked?: boolean;
    color?: CheckboxColorsType;
}

export interface ICheckboxFrame extends HTMLAttributes<HTMLDivElement> {
    size?: 'extra-small' | 'small' | 'medium';
    checked?: boolean;
    disabled?: boolean;
    color?: CheckboxColorsType;
}

export interface ICheckboxSizeMapper {
    xs: 'extra-small';
    sm: 'small';
    md: 'medium';
}