import { ElementType, PropsWithChildren } from 'react';
import { ClayProps } from '../utilities/Clay/Clay.types.js';
import '@emotion/react';
import '../types.js';

type AvatarProps<Element extends ElementType = "div"> = PropsWithChildren<ClayProps<Element>> & {
    /**
     * 아바타에 표기될 이미지의 url을 기입합니다. img 태그의 src속성과 동일합니다.
     */
    src?: string;
    /**
     * fallback 용도로 사용되는 Avatar dummy의 index를 정합니다. 0 ~ 15 값을 사용할 수 있습니다.
     *
     * dummy란?
     *
     * 아바타에 대한 사용자 이미지가 없는 경우 랜덤 기본 이미지가 제공됩니다.
     */
    dummyIndex?: number;
    /**
     * 아바타의 사이즈를 정의합니다.
     * @default "medium"
     *
     * xsmall: 24px
     *
     * small: 32px
     *
     * medium: 40px
     *
     * large: 48px
     *
     * xlarge: 64px
     *
     * 2xlarge: 96px
     *
     * 3xlarge: 120px
     */
    size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge";
    /**
     * 선택된 상태를 표시할 수 있습니다. selected 상태는 해당 항목이 선택 되었음을 나타냅니다.
     * @default false
     */
    selected?: boolean;
};

export { AvatarProps };