import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';

@Component({
  selector: 'porsche-design-system-app',
  template: `
    <form (submit)="handleSubmit($event)" class="flex gap-fluid-sm">
      <p-button name="option" value="A" type="submit">Button A</p-button>
      <p-button name="option" value="B" type="submit">Button B</p-button>
    </form>

    <p-text>Last submitted data: {{ lastSubmittedData }}</p-text>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [PorscheDesignSystemModule],
})
export class ExampleComponent {
  lastSubmittedData: string = 'none';

  handleSubmit(e: Event): void {
    e.preventDefault();
    const submitter = (e as SubmitEvent).submitter as HTMLButtonElement;
    this.lastSubmittedData = submitter.name + '=' + submitter.value || 'none';
  }
}