import { useState } from "react";
import Button from "./Button";
import CheckIcon from "../icons/CheckIcon";
import LoaderIcon from "../icons/LoaderIcon";

export default function LinkShare({ link }: { link: string }) {
  const [shareState, setShareState] = useState<"default" | "loading" | "done">(
    "default"
  );

  function handleCopy() {
    setShareState("loading");
    navigator.clipboard.writeText(link);

    setTimeout(() => {
      setShareState("done");
    }, 500);
  }

  return (
    <div className="flex flex-col gap-[0.556vw]">
      <div className="w-full h-[3.75vw] bg-[#F3F3F3] flex items-center justify-between gap-[0.833vw] px-[1.111vw] rounded-[1.111vw] relative">
        <span
          className="text-ellipsis text-s hover:cursor-pointer overflow-hidden"
          onClick={handleCopy}
        >
          {link}
        </span>

        {shareState === "default" && (
          <Button
            variant="cta"
            size="medium"
            className="translate-x-[0.556vw]"
            onClick={handleCopy}
          >
            Копировать
          </Button>
        )}

        {shareState === "loading" && (
          <div className="size-[1.389vw] text-[#7B60F3] animate-spin">
            <LoaderIcon />
          </div>
        )}

        {shareState === "done" && (
          <div className="size-[1.389vw] text-[#7B60F3]">
            <CheckIcon />
          </div>
        )}
      </div>
      {shareState === "done" && (
        <div className="caption-s absolutea bottom-[-1.25vw] text-[#29AF61] left-0">
          Ссылка скопирована
        </div>
      )}
    </div>
  );
}
