import React from "react";
import { addWidgetToPersonalizedDashboard } from "../../../../utils/personalizedDashboardUtils";
import { openMasterDashboard } from "../../../../utils/masterDashboardPortal";
import "../styles/AddToPersonalizedButton.css";

/**
 * Button that adds the current chart/section to the personalized dashboard and navigates there.
 * @param {string} widgetId - One of: stats, answersTrend, topSites, recentActivities, severityOfHarm, likelihoodOfHarm, observationsOpenClosed
 * @param {string} [className] - Optional extra class for the wrapper
 */
const AddToPersonalizedButton = ({ widgetId, className = "" }) => {
  const handleClick = (e) => {
    e.stopPropagation();
    addWidgetToPersonalizedDashboard(widgetId);
    openMasterDashboard("/personalized-dashboard");
  };

  return (
    <button
      type="button"
      className={`dashboard-add-to-personalized ${className}`.trim()}
      onClick={handleClick}
      aria-label="Add to personalised dashboard"
      title="Add to personalised dashboard"
    >
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
        <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );
};

export default AddToPersonalizedButton;
