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

@customElement('test-input-checkbox')
export class TestInputCheckbox extends DeesElement {
  // Same group as test-input-text
  public static demoGroup = 'Inputs';

  public static demo = () => html`
    <test-input-checkbox label="Accept terms and conditions"></test-input-checkbox>
  `;

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

  @property({ type: Boolean })
  accessor checked: boolean = false;

  public static styles = [
    css`
      :host {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }
      .checkbox {
        width: 18px;
        height: 18px;
        border: 1px solid #333;
        border-radius: 4px;
        background: #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
      }
      .checkbox.checked {
        background: #3b82f6;
        border-color: #3b82f6;
      }
      .checkbox.checked::after {
        content: '✓';
        color: white;
        font-size: 12px;
      }
      .label {
        color: #e5e5e5;
        font-size: 14px;
      }
    `,
  ];

  public render() {
    return html`
      <div
        class="checkbox ${this.checked ? 'checked' : ''}"
        @click=${() => this.checked = !this.checked}
      ></div>
      <span class="label">${this.label}</span>
    `;
  }
}