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

type TableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  columns?: boolean;
  title?: string;
  size?: "small" | "medium" | "large";
};

const sizeMap = {
  small: {
    button: "px-2 py-1",
    content: "px-2 py-1 text-xs rounded-md gap-1",
    icon: "w-4 h-4",
  },
  medium: {
    button: "px-3 py-1.5",
    content: "px-3 py-1.5 text-sm rounded-lg gap-1.5",
    icon: "w-4 h-4",
  },
  large: {
    button: "px-4 py-2",
    content: "px-4 py-2 text-base rounded-xl gap-2",
    icon: "w-5 h-5",
  },
};

export const TableButton = ({
  size = "medium",
  disabled = false,
  className = "",
  title = "نمایش",
  onClick,
  ...props
}: TableButtonProps) => {
  const styles = sizeMap[size];

  return (
    <button
      disabled={disabled}
      onClick={onClick}
      className={`relative overflow-hidden group cursor-pointer ${styles.button} ${className}`}
      {...props}
    >
      <motion.span
        className={`flex items-center justify-center ${styles.content} ${
          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={`${styles.icon} 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>
  );
};
