/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import {styles} from './nile-form-error-message.css';

/**
 * Nile icon component.
 *
 * @tag nile-form-error-message
 *
 */
@customElement('nile-form-error-message')
export class NileFormErrorMessage extends LitElement {

	/**
	 * The styles for FormErrorMessage
	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
	 */
	public static get styles(): CSSResultArray {
		return [styles];
	}

	/* #endregion */

	/* #region Methods */

	/**
	 * Render method
	 * @slot This is a slot test
	 */
	public render(): TemplateResult {
		return html`
      <div class="nile-form-error-message">
       <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
        </div>
			`;
	}

	/* #endregion */
}

export default NileFormErrorMessage;

declare global {
  interface HTMLElementTagNameMap {
    'nile-form-error-message': NileFormErrorMessage;
  }
}