import {
  DeesElement,
  customElement,
  html,
  property,
  css,
} from '@design.estate/dees-element';

@customElement('test-button-primary')
export class TestButtonPrimary extends DeesElement {
  // This groups the element with other "Buttons" in the sidebar
  public static demoGroup = 'Buttons';

  public static demo = () => html`
    <test-button-primary>Click Me</test-button-primary>
  `;

  @property({ type: String })
  accessor label: string = 'Button';

  public static styles = [
    css`
      :host {
        display: inline-block;
      }
      button {
        background: #3b82f6;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s;
      }
      button:hover {
        background: #2563eb;
      }
    `,
  ];

  public render() {
    return html`<button><slot>${this.label}</slot></button>`;
  }
}