import React from 'react';
import { Button } from '@/components/common/Button';
import { DiscordLogo } from './DiscordLogo';
import { URLS } from '@/lib/config/constants';

interface DiscordButtonProps {
  children: React.ReactNode;
  href?: string;
  onClick?: () => void;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  showIcon?: boolean;
}

export const DiscordButton: React.FC<DiscordButtonProps> = ({
  children,
  href = URLS.social.discord,
  onClick,
  size = 'md',
  className = '',
  showIcon = true
}) => {
  const content = (
    <>
      {showIcon && <DiscordLogo size={size === 'sm' ? 'sm' : 'md'} className="text-white mr-2" />}
      {children}
    </>
  );

  if (href) {
    return (
      <a href={href} target="_blank" rel="noopener noreferrer">
        <Button variant="discord" size={size} className={className}>
          {content}
        </Button>
      </a>
    );
  }

  return (
    <Button variant="discord" size={size} onClick={onClick} className={className}>
      {content}
    </Button>
  );
};

export default DiscordButton;