'use client'

import { Eye, CheckCircle2, Trash2, Pencil } from 'lucide-react'

interface ControlReviewActionsProps {
  controlId: string
  releaseState: string
  reviewMode?: boolean
  onReview: (controlId: string, action: string) => void
  onEdit: () => void
}

export function ControlReviewActions({
  controlId, releaseState, reviewMode, onReview, onEdit,
}: ControlReviewActionsProps) {
  if (!['needs_review', 'too_close', 'duplicate'].includes(releaseState)) return null

  return (
    <section className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
      <div className="flex items-center gap-2 mb-3">
        <Eye className="w-4 h-4 text-yellow-700" />
        <h3 className="text-sm font-semibold text-yellow-900">Review erforderlich</h3>
        {reviewMode && <span className="text-xs text-yellow-600 ml-auto">Review-Modus aktiv</span>}
      </div>
      <div className="flex items-center gap-2">
        <button onClick={() => onReview(controlId, 'approve')} className="px-3 py-1.5 text-sm text-white bg-green-600 rounded-lg hover:bg-green-700">
          <CheckCircle2 className="w-3.5 h-3.5 inline mr-1" />Akzeptieren
        </button>
        <button onClick={() => onReview(controlId, 'reject')} className="px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700">
          <Trash2 className="w-3.5 h-3.5 inline mr-1" />Ablehnen
        </button>
        <button onClick={onEdit} className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
          <Pencil className="w-3.5 h-3.5 inline mr-1" />Ueberarbeiten
        </button>
      </div>
    </section>
  )
}