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

export interface SharePanelProps {
  url: string;
  locale: string;
  onClose: () => void;
}

export const SharePanel: FC<SharePanelProps> = ({ url, locale, onClose }) => {
  const { t } = useTranslation();
  const encoded = encodeURIComponent(url);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(url);
      onClose();
    } catch {
      // silent
    }
  };

  return (
    <div className="share-panel" data-testid="share-panel">
      <a
        data-testid="share-facebook"
        href={`https://www.facebook.com/sharer/sharer.php?u=${encoded}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        Facebook
      </a>
      <a
        data-testid="share-vk"
        href={`https://vk.com/share.php?url=${encoded}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        VK
      </a>
      <a
        data-testid="share-twitter"
        href={`https://twitter.com/share?text=${encodeURIComponent("My Flight")}&url=${encoded}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        Twitter
      </a>
      {locale === "zh" && (
        <a
          data-testid="share-weibo"
          href={`https://service.weibo.com/share/share.php?url=${encoded}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          Weibo
        </a>
      )}
      <button type="button" data-testid="share-copy" onClick={handleCopy}>
        {t("SHARED.COPY") || "Copy"}
      </button>
    </div>
  );
};
