import { ElementType, HTMLAttributes } from 'react';
import { BaseProps } from '../../types.js';
import '@emotion/react';

type SocialLoginButtonCommonProps = {
    variant: "naver" | "kakao" | "google" | "apple" | "line" | "facebook";
    /**
     * 버튼의 size를 설정할 수 있습니다.
     * @default medium
     */
    size?: "medium" | "large";
};
type SocialLoginButtonIconOnlyProps<Element extends ElementType> = HTMLAttributes<HTMLButtonElement> & BaseProps<Element> & SocialLoginButtonCommonProps;
type SocialLoginButtonWithTextProps<Element extends ElementType> = HTMLAttributes<HTMLButtonElement> & BaseProps<Element> & SocialLoginButtonCommonProps & {
    /**
     * width 100%를 지정할 수 있는 속성입니다.
     * @default undefined
     */
    fullWidth?: boolean;
    /**
     * Button의 text를 담당하는 prop 입니다
     * text가 없을 경우 icon only 형태의 디자인으로 적용됩니다.
     */
    text: string;
};
type SocialLoginButtonProps<Element extends ElementType> = SocialLoginButtonIconOnlyProps<Element> | SocialLoginButtonWithTextProps<Element>;

export { SocialLoginButtonIconOnlyProps, SocialLoginButtonProps, SocialLoginButtonWithTextProps };