import type { ButtonHTMLAttributes, ReactNode } from "react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  icon: ReactNode;
  label: string;
  active?: boolean;
}

export default function IconButton({
  icon,
  label,
  active,
  className = "",
  ...rest
}: Props) {
  return (
    <button
      {...rest}
      type={rest.type ?? "button"}
      aria-label={label}
      title={label}
      className={[
        "inline-flex items-center justify-center w-9 h-9 rounded-full",
        "border border-transparent text-brand-text/80",
        "hover:bg-brand-lines/10 hover:text-brand-accent transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-accent/60",
        active ? "text-brand-accent bg-brand-lines/10" : "",
        className,
      ].join(" ")}
    >
      {icon}
    </button>
  );
}
