import { CSSObject } from '@emotion/react';
import { ElementType, Dispatch, SetStateAction, ComponentPropsWithoutRef } from 'react';

type DataAttributeKey = `data-${string}`;
type DataAttribute = {
    [key in DataAttributeKey]?: string | boolean;
};
type As<T extends ElementType = "div"> = {
    as?: T;
    native?: DataAttribute & ComponentPropsWithoutRef<T>;
};
type BaseProps<Element extends ElementType = "div"> = As<Element> & {
    /**
     * 추가적인 클래스 네임을 지정할 때 사용됩니다.
     * 이 prop을 사용함으로 인해 발생되는 스타일 변경은 DS에서 보장할 수 없습니다.
     * @default undefined
     */
    className?: string;
    /**
     * sx prop을 정의합니다.
     * 가상 선택자들을 활용해야 할 때 유용하게 사용할 수 있습니다.
     * @default undefined
     */
    sx?: CSSObject;
};
type NumberPixel = `${number}px`;
type StateSetter<T> = Dispatch<SetStateAction<T>>;
type Nullable<T> = null | T;
type Sumber = string | number;
type PickRequired<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
type ValueOf<T> = T[keyof T];

export { BaseProps, Nullable, NumberPixel, PickRequired, StateSetter, Sumber, ValueOf };