"use client";
 
import { cn, TRANSITION } from "@/lib/utils";
import { AlertCircleIcon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { AnimatePresence, motion, MotionConfig } from "motion/react";
import { useRef, useState } from "react";
import { buttonVariants } from "@/components/ui/button";
 
const variant = {
  show: {
    opacity: 1,
    y: -85,
    filter: "blur(0px)",
  },
  hidden: {
    y: -40,
    opacity: 0,
    filter: "blur(4px)",
  },
};
 
const BetterToast = () => {
  const key = "sk_live_••••••••••••••••••";
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [isActive, setIsActive] = useState(false);
 
  const handleCopy = async () => {
    await navigator.clipboard.writeText(key);
 
    setIsActive(true);
 
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
 
    timeoutRef.current = setTimeout(() => {
      setIsActive(false);
    }, 1600);
  };
 
  return (
    <>
      <MotionConfig transition={TRANSITION}>
        <div className="hidden md:flex size-full items-center justify-center bg-background">
          <div className="max-w-lg w-full mx-auto p-1  rounded-xl border border-border/25 bg-muted">
            <div className="max-w-lg w-full mx-auto border border-border bg-background rounded-lg p-4 flex flex-col gap-4">
              <div>
                <h1 className="font-semibold text-xl">API Key</h1>
                <p className="text-muted-foreground">Start building today</p>
              </div>
              <div className="flex flex-col items-end gap-2">
                <div className="w-full relative z-0">
                  <div className="border p-2 rounded-xl flex items-center justify-between z-20 bg-background">
                    <span>{key}</span>
                    <button
                      onClick={handleCopy}
                      className={cn(
                        buttonVariants({ variant: "outline" }),
                        "bg-muted opacity-100 transition duration-300",
                        {
                          "opacity-0": isActive,
                        },
                      )}
                    >
                      Copy
                    </button>
                  </div>
                  <AnimatePresence>
                    {isActive && (
                      <motion.div
                        variants={variant}
                        initial="hidden"
                        animate="show"
                        exit="hidden"
                        className="border border-blue-500 w-fit rounded bg-blue-50 text-blue-500 px-2 py-0.5 font-medium absolute right-2 text-sm -z-10"
                      >
                        Copied
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
                <p className="text-muted-foreground flex items-center gap-2 w-fit text-sm">
                  <HugeiconsIcon icon={AlertCircleIcon} className="size-4" />
                  <span>Need another API Key?</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </MotionConfig>
      <div className="md:hidden size-full px-4 flex items-center justify-center ">
        <h1 className="font-bold text-center">
          sorry this component is not available on mobile
        </h1>
      </div>
    </>
  );
};
 
export default BetterToast;