import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import { motion } from "framer-motion";

type Props = {
  title?: string;
  link?: string;
};
export const DocumentDownloader = ({ title, link }: Props) => {
  return (
    <button
      disabled={!link}
      onClick={() => {
        window.location.href = link || "";
      }}
      className={`relative overflow-hidden group ${
        link ? "cursor-pointer" : "cursor-not-allowed opacity-60"
      } `}
    >
      <motion.span
        className={`flex items-center justify-center gap-1 px-3 py-1.5 text-sm rounded-lg bg-info-500/20 text-info-700 dark:text-primary-400 dark:bg-info-800/20`}
        initial={false}
        whileTap={{ scale: 0.95 }}
      >
        <motion.span
          className="flex items-center gap-2"
          initial={false}
          animate={{
            opacity: [1, 0.7, 1],
          }}
          transition={{
            repeat: Infinity,
            duration: 3,
            ease: "easeInOut",
          }}
        >
          {title || "دریافت"}
          <ArrowDownTrayIcon className="w-4 h-4 ml-1" />
        </motion.span>

        <motion.span
          className="absolute inset-0 bg-primary-500/10 opacity-0 group-hover:opacity-100"
          initial={false}
          transition={{ duration: 0.3 }}
          style={{
            borderRadius: "50%",
            scale: 0,
          }}
          whileHover={{
            scale: 2,
            opacity: 0,
            transition: { duration: 0.6 },
          }}
        />
      </motion.span>
    </button>
  );
};
