import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

import '@components/General/Button';

@customElement('arx-arbor-forum-category')
export class ArborForumCategory extends LitElement {
  @property({ type: String }) override title = '';
  @property({ type: String }) override id = '';

  static override styles = [
    css`
      .forum-category {
        background: var(--color-base-100);
        border-radius: var(--radius-box);
        border: var(--border) solid var(--color-base-300);
        margin-block-end: 2rem;
        box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
            calc(var(--depth) * 4px)
            oklch(from var(--color-base-content) l c h / 0.1),
          calc(var(--depth) * -1px) calc(var(--depth) * -1px)
            calc(var(--depth) * 3px)
            oklch(from var(--color-base-100) l c h / 0.4);
        overflow: hidden;
      }

      .category-header {
        background: var(--color-secondary);
        color: var(--color-secondary-content);
        padding: 1.25rem 1.75rem;
        font-weight: 600;
        font-size: 1.1rem;
        letter-spacing: 0.01em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: var(--border) solid var(--color-base-300);
      }

      ::slotted(:first-child) {
        margin-top: 1rem;
      }

      ::slotted(:last-child) {
        margin-bottom: 1rem;
      }

      .empty-state {
        padding: 2rem 1.75rem;
        color: var(--color-secondary);
        font-style: italic;
        text-align: center;
      }
    `,
  ];

  override render() {
    return html`
      <div class="forum-category">
        <div class="category-header">
          <span>${this.title}</span>
          <arx-button
            label="New Thread"
            href="/arbor/new-thread/${this.id}"
          ></arx-button>
        </div>
        <slot>
          <div class="empty-state">No threads yet...</div>
        </slot>
      </div>
    `;
  }
}
