import React from "react";
import { PencilIcon, XMarkIcon, EyeIcon } from "@heroicons/react/24/outline";

interface TableActionsProps {
  onEdit: () => void;
  onDelete: () => void;
  onView?: () => void;
}

const TableActions: React.FC<TableActionsProps> = ({
  onEdit,
  onDelete,
  onView,
}) => {
  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation(); // Impede a propagação para a linha da tabela
    onEdit();
  };

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation(); // Impede a propagação para a linha da tabela
    onDelete();
  };

  const handleView = (e: React.MouseEvent) => {
    e.stopPropagation(); // Impede a propagação para a linha da tabela
    onView();
  };

  return (
    <div className="flex space-x-2">
      {onView && (
        <button
          onClick={handleView}
          className="text-gray-600 hover:text-green-600 transition-colors"
          title="Ver Detalhes"
        >
          <EyeIcon className="w-4 h-4" />
        </button>
      )}
      <button
        onClick={handleEdit}
        className="text-gray-600 hover:text-blue-600 transition-colors"
        title="Editar"
      >
        <PencilIcon className="w-4 h-4" />
      </button>
      <button
        onClick={handleDelete}
        className="text-gray-600 hover:text-red-600 transition-colors"
        title="Deletar"
      >
        <XMarkIcon className="w-4 h-4" />
      </button>
    </div>
  );
};

export default TableActions;