import { type FC, useState } from "react";
import { useTranslation } from "@/i18n/provider.js";
import { SharePanel } from "./SharePanel.js";
import "./actions.scss";

export interface ShareButtonProps {
  url: string;
  locale: string;
}

export const ShareButton: FC<ShareButtonProps> = ({ url, locale }) => {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);

  return (
    <div className="share-button-wrap">
      <button
        type="button"
        className="flight-action-btn flight-action-btn--transparent"
        data-testid="share-button"
        title={t("BOARD.SHARE")}
        onClick={() => setOpen((v) => !v)}
        aria-label={t("BOARD.SHARE")}
      >
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="18" cy="5" r="3" />
          <circle cx="6" cy="12" r="3" />
          <circle cx="18" cy="19" r="3" />
          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
          <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
        </svg>
      </button>
      {open && <SharePanel url={url} locale={locale} onClose={() => setOpen(false)} />}
    </div>
  );
};