import React from "react";
import { Tooltip } from "../Tooltip";
import LogOutIcon from "../../assets/logout-icon.svg";

export default function Actions({ open, handleLogOut }) {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleLogOut?.();
    }
  };

  const sharedProps = {
    className: "impact-sidebar-actions-list-item logout-container",
    role: "menuitem",
    tabIndex: 0,
    onClick: handleLogOut,
    onKeyDown: handleKeyDown,
    'data-sidebar-item': '',
    'data-item-type': 'action',
    'data-item-value': 'logout',
  };

  if (open) {
    return (
      <div {...sharedProps}>
        <img className="logout-container-img" src={LogOutIcon} alt="Logout" />
        <div className="impact-sidebar-actions-list-item-label">Logout</div>
      </div>
    );
  }

  return (
    <Tooltip title="Logout" orientation="right" variant="tertiary">
      <div {...sharedProps}>
        <img className="logout-container-img" src={LogOutIcon} alt="Logout" />
        <div className="impact-sidebar-actions-list-item-label">Logout</div>
      </div>
    </Tooltip>
  );
}
