import "./FloatingMapControls.css";

interface Props {
  isLoggedIn: boolean;
  hasSelectedMap: boolean;
  isOwner: boolean;
  onNewMap: () => void;
  onViewMaps: () => void;
  onEditMap: () => void;
  onDeleteMap: () => void;
}

export default function FloatingMapControls({
  isLoggedIn,
  hasSelectedMap,
  isOwner,
  onNewMap,
  onViewMaps,
  onEditMap,
  onDeleteMap,
}: Props) {
  if (!isLoggedIn) return null;

  return (
    <div className="floating-map-controls">
      {/* Always visible for logged-in users */}
      <button className="fmc-btn" onClick={onViewMaps} title="View maps">
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <rect x="3" y="3" width="7" height="7" />
          <rect x="14" y="3" width="7" height="7" />
          <rect x="14" y="14" width="7" height="7" />
          <rect x="3" y="14" width="7" height="7" />
        </svg>
        Maps
      </button>

      <button
        className="fmc-btn fmc-btn-primary"
        onClick={onNewMap}
        title="Create a new map"
      >
        + New Map
      </button>

      {/* Owner-only actions — only when a map is selected */}
      {hasSelectedMap && isOwner && (
        <>
          <button
            className="fmc-btn"
            onClick={onEditMap}
            title="Edit map settings"
          >
            Edit Map
          </button>
          <button
            className="fmc-btn fmc-btn-danger"
            onClick={onDeleteMap}
            title="Delete this map"
          >
            Delete
          </button>
        </>
      )}
    </div>
  );
}
