/**
 * Copyright Aquera Inc 2025
 *
 * 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 { html, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-inline-sidebar-panel.css';
import NileElement from '../internal/nile-element';

/**
 * Content panel associated with a `nile-inline-sidebar-item`.
 * Linked via the item's `panel` property matching this panel's `name`.
 *
 * @tag nile-inline-sidebar-panel
 *
 * @attr name - Identifier that links this panel to a sidebar item's `panel` property.
 * @attr active - Whether this panel is currently visible.
 *
 * @slot - Default slot for panel content.
 *
 * @csspart base - The panel container.
 */
@customElement('nile-inline-sidebar-panel')
export class NileInlineSidebarPanel extends NileElement {
  /** Identifier that links this panel to a sidebar item's `panel` property. */
  @property({ type: String, reflect: true }) name = '';

  /** Whether this panel is currently visible. */
  @property({ type: Boolean, reflect: true }) active = false;

  public static get styles(): CSSResultArray {
    return [styles];
  }

  public render(): TemplateResult {
    return html`
      <div class="panel" part="base">
        <slot></slot>
      </div>
    `;
  }
}

export default NileInlineSidebarPanel;

declare global {
  interface HTMLElementTagNameMap {
    'nile-inline-sidebar-panel': NileInlineSidebarPanel;
  }
}