import CustomButton from "@/components/CustomButton";
import useReffer from "@/hooks/useReffer";
import { copyText } from "@/utils/methods";
import { Toast } from "antd-mobile";
import clsx from "clsx";
import { useLocale } from "next-intl";
import React from "react";

interface Props {
    text?: string;
    className?: string;
}

const ShareText: React.FC<Props> = ({ text, className }) => {
    const locale = useLocale();
    const url = useReffer({ locale });
    // ${decodeURIComponent(url)}

    const localText = React.useMemo(() => {
        return `${text?.replace(/{%}/g, decodeURIComponent(url))}`;
    }, [text, url]);

    return (
        <div
            className={clsx(
                "mt-[.1rem] !h-auto w-full !flex-col overflow-hidden !rounded-[var(--borderRadius)] border border-[var(--primary-button)] bg-[#fff] px-[8px] py-[8px]",
                className
            )}
        >
            <div className="h-[80px] overflow-x-hidden whitespace-pre-wrap break-all py-[10px] pl-[8px] text-center text-[12px] leading-[20px]">
                {localText}
            </div>
            <CustomButton
                className="!h-[37px] !w-[100%] !text-[.12rem]"
                onClick={() => {
                    copyText(`${localText}${decodeURIComponent(url)}`);
                    Toast.show({ icon: "success", content: "Copiado com sucesso" });
                }}
            >
                Copiar
            </CustomButton>
        </div>
    );
};

export default ShareText;