import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-empty-state',
  standalone: true,
  imports: [CommonModule, MatIconModule, MatButtonModule],
  template: `
    <div class="empty-state">
      <mat-icon>{{ icon }}</mat-icon>
      <h3>{{ title }}</h3>
      @if (message) {
        <p>{{ message }}</p>
      }
      <div class="empty-state-actions">
        <ng-content></ng-content>
      </div>
    </div>
  `,
  styles: [
    `
      .empty-state {
        text-align: center;
        padding: 48px 24px;

        mat-icon {
          font-size: 64px;
          width: 64px;
          height: 64px;
          color: rgba(0, 0, 0, 0.26);
          margin-bottom: 16px;
        }

        h3 {
          margin: 0 0 8px;
          font-size: 1.125rem;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.54);
        }

        p {
          margin: 0 0 24px;
          color: rgba(0, 0, 0, 0.38);
          max-width: 400px;
          margin-left: auto;
          margin-right: auto;
        }
      }

      .empty-state-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
      }
    `,
  ],
})
export class EmptyStateComponent {
  @Input() icon = 'inbox';
  @Input() title = 'No data';
  @Input() message?: string;
}
