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

export function HostOrgToolbar({ actions = [], filters }) {
  return (
    <div className={styles.toolbar}>
      <div className={styles.toolbarLeft}>
        <HostOrgFilters {...filters} />
      </div>

      {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)"
  }
};