import React from "react";
import { getSwiWidgetMeta } from "../../../config/personalizedDashboard.js";
import { openPersonalDashboardWithWidget } from "../../../utils/personalizedDashboard.js";

/**
 * Adds an SWI home component to the SAT Personal Dashboard and navigates there.
 * @param {{ widgetId: string, className?: string, label?: string }} props
 */
export default function AddToPersonalizedButton({
  widgetId,
  className = "",
  label = "Add to Personal Dashboard",
}) {
  const meta = getSwiWidgetMeta(widgetId);
  const title = meta
    ? `Add "${meta.label}" to Personal Dashboard`
    : label;

  return (
    <button
      type="button"
      className={`swi-add-to-pd${className ? ` ${className}` : ""}`}
      onClick={() => openPersonalDashboardWithWidget(widgetId)}
      aria-label={title}
      title={title}
    >
      <svg viewBox="0 0 24 24" fill="none" width="16" height="16" aria-hidden>
        <path
          d="M12 5v14M5 12h14"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
        />
      </svg>
      <span className="swi-add-to-pd__text">{label}</span>
    </button>
  );
}
