import { HTMLAttributes, ReactChild, FC } from 'react';
import CSS from 'csstype';
import * as styled_components from 'styled-components';

declare type Color = 'danger' | 'success' | 'warning' | 'info' | 'primary' | 'secondary' | CSS.Property.Color;

interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
    children?: ReactChild;
    disabled?: boolean;
    size?: 'small' | 'medium' | 'large';
    secondary?: boolean;
    color?: Color;
}

declare const Button: FC<ButtonProps>;

interface InputProps extends HTMLAttributes<HTMLInputElement> {
    color?: Color;
    backgroundColor?: Color;
    lineColor?: Color;
    value?: string;
}

declare const Input: FC<InputProps>;

interface Theme {
    colors: {
        primary?: Color;
        secondary?: Color;
        danger?: Color;
        success?: Color;
        warning?: Color;
        info?: Color;
    };
    custom?: object;
}
declare function createTheme(theme: Theme): Theme;

interface ContactlessProviderProps {
    theme?: Theme;
    children?: ReactChild;
}

declare const ContactlessProvider: FC<ContactlessProviderProps>;

interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
    flex?: boolean;
    padding?: boolean;
}

declare const Container: FC<ContainerProps>;

interface BlockProps extends HTMLAttributes<HTMLDivElement> {
    size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
}

declare const Block: FC<BlockProps>;

interface NavbarProps extends HTMLAttributes<HTMLDivElement> {
    toggler?: ReactChild;
    brand?: ReactChild;
}
interface NavLinkProps extends HTMLAttributes<HTMLDivElement> {
    to: string;
}

declare const Navbar: FC<NavbarProps>;
declare const NavLink: FC<NavLinkProps>;

interface GridProps extends HTMLAttributes<HTMLDivElement> {
    columns?: number | CSS.Property.GridTemplateColumns;
    rows?: number | CSS.Property.GridTemplateRows;
    gap?: CSS.Property.Gap;
}

declare const Grid: FC<GridProps>;

interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
    y?: number;
    width?: number;
    x?: number;
    height?: number;
}

declare const GridItem: FC<GridItemProps>;

interface SelectionProps {
    color?: CSS.Property.Color;
    background?: CSS.Property.Background;
}

declare const Selection: styled_components.GlobalStyleComponent<SelectionProps, styled_components.DefaultTheme>;

export { Block, Button, ContactlessProvider, Container, Grid, GridItem, Input, NavLink, Navbar, Selection, createTheme };