export default function Banner({ views, url }: { views: number }) {

  const copyToClipboard = (text) => {
    var tempInput = document.createElement("input");
    tempInput.value = text;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);

    alert('已复制:'+text);
  }

  const currentDomain = window.location.hostname;
  const contentDomain = currentDomain=='gtering.com'?'Gtering.com':'Ansnid.Com';


  return (
        <div
          className="z-10 fixed bottom-10 inset-x-0 mx-auto max-w-fit rounded-lg px-3 py-2 bg-white border border-gray-100 shadow-md flex justify-between space-x-2 items-center"
          initial={{ opacity: 0, y: 100 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 100 }}
        >
          <div className="w-40 flex flex-col items-center justify-center">
            <a
              href="/"
              target="_blank"
              rel="noopener noreferrer"
              className="flex space-x-2 items-center justify-center font-medium text-gray-600 px-4 py-1.5 rounded-md hover:bg-gray-100 active:bg-gray-200 transition-all"
            >
               <img
                alt="Ansnid.Com logo"
                src="/pwa-192.png"
                width={20}
                height={20}
                className="rounded-sm"
              />
              <p>{contentDomain}</p>
            </a>
          </div>
          <div className="border-l border-gray-200 h-12 w-1" />

          <button
            onClick={() =>
              copyToClipboard(url())
            }
            className="p-2 flex flex-col space-y-1 items-center rounded-md w-12 hover:bg-gray-100 active:bg-gray-200 transition-all"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-gray-600"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
            <p className="text-center text-gray-600 text-sm">Copy</p>
          </button>

          <div className="cursor-default p-2 flex flex-col space-y-1 items-center rounded-md w-12 hover:bg-gray-100 active:bg-gray-200 transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-gray-600"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>
            <p className="text-center text-gray-600 text-sm">
              {views}
            </p>
          </div>
        </div>
  );
}