import classNames from 'classnames';
import { Button as WordpressButton } from '@wordpress/components';

type ButtonProps = {
  children: React.ReactNode;
  asChild?: boolean;
  className?: string;
  onClick?: () => void;
  size?: 'small' | 'default' | 'compact';
  variant?: 'primary' | 'secondary' | 'link' | 'primary' | 'tertiary';
};

export const Button = ({
  children,
  size = 'default',
  className,
  onClick,
  variant = 'primary',
}: ButtonProps) => {
  return (
    <WordpressButton
      size={size}
      variant={variant}
      className={classNames(
        className,
        'flex items-center justify-center gap-1',
        { 'is-primary': variant === 'primary' },
        { 'is-secondary': variant === 'secondary' },
        { 'is-link': variant === 'link' },
        { 'is-tertiary': variant === 'tertiary' }
      )}
      onClick={onClick}
    >
      {children}
    </WordpressButton>
  );
};