import { Component, signal } from '@angular/core';
import { ZyraModal, ZyraButton } from 'zyra-ng-ui';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [ZyraModal, ZyraButton],
  template: `
    <zyra-button (clicked)="open.set(true)">Open</zyra-button>
    <zyra-modal [(open)]="open" title="Hello">
      <p>Modal content here.</p>
      <div slot="footer" class="zyr-modal__footer">
        <zyra-button variant="ghost" (clicked)="open.set(false)">Cancel</zyra-button>
        <zyra-button variant="primary" (clicked)="open.set(false)">Confirm</zyra-button>
      </div>
    </zyra-modal>
  `,
})
export class DemoComponent {
  open = signal(false);
}