'use client';

import React from 'react';

export type MarketplaceButtonVariant =
  | 'accept'
  | 'reject'
  | 'primary'
  | 'secondary'
  | 'warning';

export interface MarketplaceButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: MarketplaceButtonVariant;
  icon?: React.ReactNode;
}

const MarketplaceButton: React.FC<MarketplaceButtonProps> = ({
  variant = 'primary',
  icon,
  children,
  className = '',
  ...props
}) => {
  const getVariantStyles = () => {
    switch (variant) {
      case 'accept':
        return 'border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20';
      case 'reject':
        return 'border-red-500/30 bg-red-500/10 text-red-400 hover:bg-red-500/20';
      case 'warning':
        return 'border-orange-500/30 bg-orange-500/10 text-orange-400 hover:bg-orange-500/20';
      case 'secondary':
        return 'border-border-primary bg-background-secondary/50 text-foreground-secondary hover:bg-background-secondary';
      case 'primary':
      default:
        return 'border-accent-brand/30 bg-accent-brand/10 text-accent-brand hover:bg-accent-brand/20';
    }
  };

  return (
    <button
      className={`flex items-center gap-1 rounded-lg border px-2 py-1 text-xs font-medium transition-colors focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${getVariantStyles()} ${className}`}
      {...props}
    >
      {icon && <span className='flex-shrink-0'>{icon}</span>}
      {children}
    </button>
  );
};

export default MarketplaceButton;