import React from 'react';
import { cn } from '../../utils/classNames';

type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  label: string;
};

const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({
  className,
  label,
  type = 'button',
  ...props
}, ref) => (
  <button
    ref={ref}
    type={type}
    aria-label={label}
    title={label}
    className={cn(
      'inline-flex h-9 w-9 items-center justify-center rounded-md text-app-muted transition-colors hover:bg-app-surface-muted hover:text-app-text focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-app-bg disabled:pointer-events-none disabled:opacity-50',
      className,
    )}
    {...props}
  />
));

IconButton.displayName = 'IconButton';

export default IconButton;