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

@customElement('test-input-text')
export class TestInputText extends DeesElement {
  // Different group - "Inputs"
  public static demoGroup = 'Inputs';

  public static demo = () => html`
    <test-input-text placeholder="Enter text..."></test-input-text>
  `;

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

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

  public static styles = [
    css`
      :host {
        display: inline-block;
      }
      input {
        background: #1a1a1a;
        color: #e5e5e5;
        border: 1px solid #333;
        padding: 10px 14px;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s;
        min-width: 200px;
      }
      input:focus {
        border-color: #3b82f6;
      }
      input::placeholder {
        color: #666;
      }
    `,
  ];

  public render() {
    return html`
      <input
        type="text"
        .placeholder=${this.placeholder}
        .value=${this.value}
        @input=${(e: Event) => this.value = (e.target as HTMLInputElement).value}
      />
    `;
  }
}