import Tooltip from "@mui/material/Tooltip";
import styles from "@/features/host-org/host-org.module.css";
import { Button } from "@/shared/ui/Button.jsx";
import { IconButton } from "@/shared/ui/IconButton.jsx";

export function HostOrgToolbar({ actions = [], leadingActions = [] }) {
  if (!actions.length && !leadingActions.length) {
    return null;
  }

  return (
    <div className={styles.toolbar}>
      {leadingActions.length ? (
        <div className={styles.toolbarLeft}>
          {leadingActions.map((action) => (
            <Button
              className={styles.toolbarTextAction}
              disabled={action.disabled}
              key={action.label}
              startIcon={action.icon}
              variant={action.variant}
              onClick={action.onClick}
            >
              {action.label}
            </Button>
          ))}
        </div>
      ) : null}
      {actions.length ? (
        <div className={styles.toolbarActions}>
          {actions.map((action) => (
            <Tooltip arrow key={action.label} title={action.label}>
              <span>
                <IconButton
                  className={styles.toolbarAction}
                  disabled={action.disabled}
                  label={action.label}
                  tone={action.tone}
                  onClick={action.onClick}
                  sx={action.variant === "primary" ? primaryActionSx : undefined}
                >
                  {action.icon}
                </IconButton>
              </span>
            </Tooltip>
          ))}
        </div>
      ) : null}
    </div>
  );
}

const primaryActionSx = {
  borderColor: "var(--primary)",
  backgroundColor: "var(--primary)",
  color: "var(--active-contrast)",
  "&:hover": {
    borderColor: "var(--primary-strong)",
    backgroundColor: "var(--primary-strong)",
    color: "var(--active-contrast)"
  }
};
