import { PropType, defineComponent } from "vue";
import styles from "./index.module.less";
import TheIcon from "/src/components/The-icon";

export default defineComponent({
	name: "TheBtn",
	props: {
		icon: {
			type: String,
			default: "",
		},
		name: {
			type: String,
			default: "",
		},
		showName: {
			type: Boolean,
			default: true,
		},
		active: {
			type: Boolean,
			default: false,
		},
        size: {
            type: Array as PropType<string[]>,
			default: ["1em", "1em"],
        }
	},
	setup(props) {
		return () => (
			<div class={[styles.btn, props.active && styles.active]} title={props.name}>
				<div class={styles.icon}>
					<TheIcon iconClassName={props.icon} size={props.size} />
				</div>
				{props.showName && <div class={styles.name}>{props.name}</div>}
			</div>
		);
	},
});