import { nothing, html } from 'lit';
import { property } from 'lit/decorators.js';
import { tv } from 'tailwind-variants';
import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
import '../lukso-icon/index.js';
import '../../chunks/index-CA_aKopU.js';

const style = ":host {\n    display: flex\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let LuksoAlert = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.variant = "info";
    this.hasIcon = false;
    this.title = "";
    this.description = "";
    this.styles = tv({
      base: "rounded-8 p-4 flex gap-3 items-center",
      variants: {
        variant: {
          info: "bg-blue-95 text-blue-40",
          warning: "bg-honey-92 text-yellow-25",
          error: "bg-red-95 text-red-55",
          success: "bg-green-95 text-green-45"
        }
      }
    });
  }
  get icon() {
    switch (this.variant) {
      case "warning":
        return { name: "info-circle", color: "yellow-25" };
      case "error":
        return { name: "danger", color: "red-55" };
      case "success":
        return { name: "tick-circle", color: "green-45" };
      default:
        return { name: "info-circle", color: "blue-40" };
    }
  }
  render() {
    const styles = this.styles({
      variant: this.variant
    });
    return html`
      <div class=${styles}>
        ${this.hasIcon ? html`<lukso-icon
              pack="vuesax"
              name="${this.icon.name}"
              color="${this.icon.color}"
            ></lukso-icon>` : nothing}
        <div class="flex flex-col gap-1">
          ${this.title ? html`<div class="heading-inter-14-bold">${this.title}</div>` : nothing}
          ${this.description ? html`<lukso-sanitize
                class="paragraph-inter-12-regular"
                html-content="${this.description}"
              ></lukso-sanitize>` : nothing}
        </div>
      </div>
    `;
  }
};
__decorateClass([
  property({ type: String })
], LuksoAlert.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-icon", reflect: true })
], LuksoAlert.prototype, "hasIcon", 2);
__decorateClass([
  property({ type: String })
], LuksoAlert.prototype, "title", 2);
__decorateClass([
  property({ type: String })
], LuksoAlert.prototype, "description", 2);
LuksoAlert = __decorateClass([
  safeCustomElement("lukso-alert")
], LuksoAlert);

export { LuksoAlert };
