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

type TableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  columns?: boolean;
  title?: string;
};

export const TableButton = ({
  disabled = false,
  className = "",
  columns = false,
  title = "نمایش",
  onClick,
  ...props
}: TableButtonProps) => {
  return (
    <button
      disabled={disabled}
      onClick={onClick}
      className={`relative overflow-hidden group ${className} cursor-pointer`}
      {...props}
    >
      <motion.span
        className={`flex items-center justify-center gap-1 px-3 py-1.5 text-sm rounded-lg ${
          columns
            ? `${
                disabled
                  ? "bg-primary-500/40 opacity-40 cursor-not-allowed"
                  : "bg-primary-500/40"
              }  text-primary-700 dark:text-primary-400 dark:bg-primary-500/20`
            : `${
                disabled
                  ? "bg-primary-500/30 opacity-40 cursor-not-allowed"
                  : "bg-primary-500/30"
              } text-primary-700 dark:text-primary-400 dark:bg-primary-100/20`
        }`}
        initial={false}
        whileTap={{ scale: 0.95 }}
      >
        <motion.span
          className="flex items-center"
          initial={false}
          animate={{
            opacity: [1, 0.7, 1],
          }}
          transition={{
            repeat: Infinity,
            duration: 3,
            ease: "easeInOut",
          }}
        >
          <EyeIcon className="w-4 h-4 ml-1" />
          {title}
        </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>
  );
};
