import { ElementType } from 'react';
import { BaseProps } from '../../types.cjs';
import { ButtonCommonProps } from '../Button.types.cjs';
import '@emotion/react';

/**
 * 현재는 IconButton 과 Button 을 디자인 상에서 구분하지 않고 있기 때문에 Type 또한 ButtonProps 를 그대로 사용하지만,
 * 이후에 디자인 상에서도 버튼과 구분된다면 IconButton 타입도 별도로 구분되는 편이 좋을 것 같습니다.
 */

type IconButtonCommonProps = Omit<ButtonCommonProps, "text" | "leadingIcon" | "trailingIcon"> & {
    icon: React.ReactNode;
};
type IconButtonPrimaryVariantProps<Element extends ElementType> = BaseProps<Element> & IconButtonCommonProps & {
    variant: "primary";
    tonal?: boolean;
};
type IconButtonAccentVariantProps<Element extends ElementType> = BaseProps<Element> & IconButtonCommonProps & {
    variant: "accent";
    tonal?: boolean;
};
type IconButtonCriticalVariantProps<Element extends ElementType> = BaseProps<Element> & IconButtonCommonProps & {
    variant: "critical";
    tonal?: boolean;
};
type IconButtonOutlinedVariantProps<Element extends ElementType> = BaseProps<Element> & IconButtonCommonProps & {
    variant: "outlined";
};
type IconButtonSecondaryVariantProps<Element extends ElementType> = BaseProps<Element> & IconButtonCommonProps & {
    variant: "secondary";
};
type IconButtonProps<E extends ElementType> = IconButtonPrimaryVariantProps<E> | IconButtonAccentVariantProps<E> | IconButtonCriticalVariantProps<E> | IconButtonOutlinedVariantProps<E> | IconButtonSecondaryVariantProps<E>;

export { IconButtonAccentVariantProps, IconButtonCriticalVariantProps, IconButtonOutlinedVariantProps, IconButtonPrimaryVariantProps, IconButtonProps, IconButtonSecondaryVariantProps };