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

@customElement('test-button-secondary')
export class TestButtonSecondary extends DeesElement {
  // Same group as test-button-primary - they'll appear together
  public static demoGroup = 'Buttons';

  public static demo = () => html`
    <test-button-secondary>Secondary Action</test-button-secondary>
  `;

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

  public static styles = [
    css`
      :host {
        display: inline-block;
      }
      button {
        background: transparent;
        color: #3b82f6;
        border: 1px solid #3b82f6;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
      }
      button:hover {
        background: rgba(59, 130, 246, 0.1);
      }
    `,
  ];

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