import React from 'react';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';

interface ReferenceButtonProps {
  icon: React.ComponentType<any>;
  onClick?: () => void;
  className?: string;
  style?: React.CSSProperties;
}

export const ReferenceButton: React.FC<
  ReferenceButtonProps &
    Omit<
      React.ComponentProps<typeof Button>,
      'icon' | 'onClick' | 'className' | 'style'
    >
> = (props) => {
  const { icon, onClick, className, style, ...restProps } = props;
  return (
    <Button
      type='button'
      onClick={onClick}
      variant={ButtonVariant.Tertiary}
      size={ButtonSize.Small}
      shape={ButtonShape.Rounded}
      icon={icon}
      iconClassName='m-0 p-0 w-4 h-4 text-foreground-tertiary transition-all duration-150 hover:drop-shadow-[0_0_2px_currentColor]'
      className={twMerge(
        'bg-transparent hover:bg-transparent active:bg-transparent',
        'rounded-md p-0',
        'transition-all duration-150',
        className
      )}
      style={{ margin: 0, padding: 0, ...style }}
      {...(restProps as any)}
    />
  );
};