import { attribute, Component, WebElement, cls, html } from '..';
@Component('butt-on')
export default class Button extends WebElement {
    @attribute('boolean')
    public block?: boolean;
    @attribute()
    public iconLeft?: any;
    @attribute()
    public iconRight?: any;
    @attribute('boolean')
    public outline?: boolean;
    @attribute('boolean')
    public outlineR?: boolean;
    @attribute('boolean')
    public outlineG?: boolean;
    @attribute('boolean')
    public ghost?: boolean;
    @attribute('boolean')
    public disabled?: boolean | undefined;
    @attribute()
    public name?: string;
    @attribute()
    public value?: string;
    @attribute()
    public tag?: string;
    @attribute()
    public enctype?: string;
    @attribute()
    public class?: string;
    @attribute()
    public href?: string;
    public override async render() {
        const classes = [
            'button',
            'no-link-style',
            'focus:ring',
            { 'w-full': this.block },
            { outline: this.outline },
            { outlineR: this.outlineR && !this.disabled },
            { outlineG: this.outlineG && !this.disabled },
            { ghost: this.ghost },
            { disabled: this.disabled },
            this.class,
        ];
        const tag = this.tag ?? this.href ? 'a' : 'button';
        return html `
			<${tag} ${{ ...this.getProps() }} class="${cls(classes)}">
				${this.iconLeft}
				<slot />
				${this.iconRight}
			</${tag}>
			`;
    }
    private onClick = () => {
        if (this.disabled) {
            return;
        }
        console.log('Button clicked');
    };
}