import { Component } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  selector: 'bh-animations',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="visible.update(toggle)">Toggle card</button>
    @if (visible()) {
      <div class="tool-card" animate.enter="fade-in" animate.leave="fade-out">
        Clamp ready
      </div>
    }
    <p data-result>{{ visible() ? 'Card shown' : 'Card hidden' }}</p>`,
  styles: [
    `
      .fade-in {
        animation: appear 120ms ease-out;
      }
      .fade-out {
        animation: disappear 120ms ease-in;
      }
      @keyframes appear {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes disappear {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fade-in,
        .fade-out {
          animation-duration: 1ms;
        }
      }
    `,
  ],
})
export class App {
  visible = signal(false);
  toggle = (value: boolean) => !value;
}