import * as React from 'react';
import { clsx } from 'clsx';
import { Button, type ButtonProps } from './Button.js';

export interface IconButtonProps extends Omit<ButtonProps, 'children'> {
  icon: React.ReactNode;
  label: string;
}

export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
  ({ icon, label, className, size = 'sm', variant = 'ghost', ...props }, ref) => (
    <Button
      ref={ref}
      size={size}
      variant={variant}
      aria-label={label}
      title={label}
      className={clsx('aspect-square px-0', className)}
      {...props}
    >
      {icon}
    </Button>
  )
);

IconButton.displayName = 'IconButton';