import { defineComponent, type PropType } from 'vue';
import { UserFilled } from '@element-plus/icons-vue';

export default defineComponent({
	name: 'cl-avatar',

	props: {
		modelValue: String,
		src: String,
		icon: {
			type: null,
			default: UserFilled
		},
		size: {
			type: [String, Number] as PropType<'large' | 'default' | 'small' | number>,
			default: 40
		},
		shape: {
			type: String as PropType<'circle' | 'square'>,
			default: 'square'
		},
		fit: {
			type: String as PropType<'fill' | 'contain' | 'cover' | 'none' | 'scale-down'>,
			default: 'cover'
		}
	},

	setup(props) {
		return () => {
			const height = props.size + 'px';

			return (
				<div
					class="cl-avatar"
					style={{
						height
					}}
				>
					<el-avatar
						style={{
							height,
							width: props.size + 'px'
						}}
						{...{
							...props,
							src: props.modelValue || props.src
						}}
					/>
				</div>
			);
		};
	}
});