import { CSSObject } from '@emotion/react';
import { ElementType, CSSProperties, PropsWithChildren, ComponentPropsWithRef, ReactElement } from 'react';
import { BaseProps } from '../../types.js';

type ClayProps<Element extends ElementType> = BaseProps<Element> & {
    _hover?: CSSObject;
    _active?: CSSObject;
    _focus?: CSSObject;
    _after?: CSSObject;
    _before?: CSSObject;
    size?: CSSProperties["width"];
    shape?: "rectangle" | "circle";
} & CSSProperties & PropsWithChildren;
type ClayComponent = <C extends ElementType = "div">(props: ClayProps<C> & {
    ref?: ComponentPropsWithRef<C>["ref"];
}) => ReactElement | null;

export { ClayComponent, ClayProps };