import React from "react";
import clsx from "clsx";

import { mobileAndTabletCheck } from "@/assets/three/helpers/CameraControl";
import CallToAction from "@/components/call-to-action";
import { RWebShare } from "@/components/share/rwebshare";
import { getCopy } from "@/config/copy";
import { isWindows } from "@/helpers/is-windows";

import styles from "./styles.module.scss";

const Share = ({
  className,
  children,
  tabIndex,
  songTitle,
  nameTo,
  nameFrom,
}: {
  className: string;
  children: string;
  tabIndex?: number;
  songTitle: string;
  nameTo: string;
  nameFrom: string;
}) => {
  return (
    <RWebShare
      disableNative={!mobileAndTabletCheck()}
      data={{
        text: getCopy("share:shared_text").replace("[NAMETO]", nameTo),
        url: window.location.href,
        title: getCopy("share:title"),
        songTitle,
        nameTo,
        nameFrom,
      }}
    >
      <CallToAction
        className={clsx(className, styles.btShare)}
        tabIndex={tabIndex}
        variant="buttonPill"
      >
        {children}
      </CallToAction>
    </RWebShare>
  );
};

export default Share;