import React from "react";

/**
 * Button that adds the current chart/section to the personalized dashboard and navigates there.
 * Since Risk Assessment is a separate project, it sets a URL parameter and redirects to Master Dashboard.
 * @param {string} widgetId 
 * @param {string} [className] - Optional extra class for the wrapper
 * @param {string} [baseUrl] - Override for Master Dashboard URL
 */
const AddToPersonalizedButton = ({ widgetId, className = "", baseUrl }) => {

  const handleClick = (e) => {
    e.stopPropagation();
    e.preventDefault();
    const masterUrl = baseUrl || import.meta.env.VITE_MASTER_DASHBOARD_URL || 'http://localhost:3000';
    window.location.href = `${masterUrl}/personalized-dashboard?addWidget=${widgetId}`;
  };

  return (
    <button
      type="button"
      className={className || "dashboard-add-to-personalized"}
      onClick={handleClick}
      aria-label="Add to personalised dashboard"
      title="Add to personalised dashboard"
      style={{
        background: '#eef2f6',
        border: '1px solid #d0d7e2',
        cursor: 'pointer',
        color: '#616161',
        padding: '4px',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '4px',
        transition: 'all 0.2s'
      }}
    >
      <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;
