import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

export interface CommentMenuItem {
  id: string;
  author?: string;
  text?: string;
}

@Component({
  selector: 'app-comment-action-menu',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="w-36 bg-neutral-800 border border-neutral-700 rounded-lg py-1 shadow-xl">
      <button class="w-full text-left px-3 py-1.5 hover:bg-neutral-700 flex items-center gap-2" (click)="reply.emit(context)">
        <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="currentColor" d="M10 19l-7-7 7-7v14z"/></svg>
        <span>Reply</span>
      </button>
      <button class="w-full text-left px-3 py-1.5 hover:bg-neutral-700 flex items-center gap-2" (click)="edit.emit(context)">
        <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/></svg>
        <span>Edit</span>
      </button>
      <button class="w-full text-left px-3 py-1.5 hover:bg-neutral-700 flex items-center gap-2 text-red-300" (click)="remove.emit(context)">
        <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="currentColor" d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z"/></svg>
        <span>Delete</span>
      </button>
    </div>
  `
})
export class CommentActionMenuComponent {
  @Input() context!: CommentMenuItem;
  @Output() reply = new EventEmitter<CommentMenuItem>();
  @Output() edit = new EventEmitter<CommentMenuItem>();
  @Output() remove = new EventEmitter<CommentMenuItem>();
}