"use client";

import Link from "next/link";
import type { ReactNode } from "react";

type Tone = "default" | "accent" | "danger";

const toneClass: Record<Tone, string> = {
  default: "",
  accent: "is-accent",
  danger: "is-danger",
};

/** 32px 圆形行内操作；hover/focus 走 CSS，禁止 JS 改 style */
export default function AdminIconButton({
  children,
  tip,
  ariaLabel,
  tone = "default",
  className = "",
  href,
  disabled,
  onClick,
  type = "button",
}: {
  children: ReactNode;
  tip?: string;
  ariaLabel: string;
  tone?: Tone;
  className?: string;
  href?: string;
  disabled?: boolean;
  onClick?: () => void;
  type?: "button" | "submit";
}) {
  const cls = `admin-icon-btn ${toneClass[tone]} ${className}`.trim();

  if (href && !disabled) {
    return (
      <Link href={href} className={cls} aria-label={ariaLabel} data-tip={tip}>
        {children}
      </Link>
    );
  }

  return (
    <button
      type={type}
      className={cls}
      aria-label={ariaLabel}
      data-tip={tip}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}