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

@customElement('test-button-danger')
export class TestButtonDanger extends DeesElement {
  // Same group as other buttons
  public static demoGroup = 'Buttons';

  public static demo = () => html`
    <test-button-danger>Delete</test-button-danger>
  `;

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

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

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