import type { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { IconCheck } from './icons';

type IconButtonProps = {
  label: string;
  children: ReactNode;
  onClick?: () => void;
  to?: string;
  variant?: 'default' | 'danger';
  copied?: boolean;
};

export function IconButton({
  label,
  children,
  onClick,
  to,
  variant = 'default',
  copied = false,
}: IconButtonProps) {
  const className = `icon-btn${variant === 'danger' ? ' danger' : ''}${copied ? ' copied' : ''}`;

  if (to) {
    return (
      <Link className={className} to={to} title={label} aria-label={label}>
        {copied ? <IconCheck /> : children}
      </Link>
    );
  }

  return (
    <button type="button" className={className} title={label} aria-label={label} onClick={onClick}>
      {copied ? <IconCheck /> : children}
    </button>
  );
}
