'use client';

import React from 'react';

export interface AlertButton {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  disabled?: boolean;
}

export interface MarketplaceAlertProps {
  icon?: React.ReactNode;
  title: string;
  text?: string;
  buttons?: AlertButton[];
  variant?: 'info' | 'warning' | 'success' | 'error';
  className?: string;
  'aria-label'?: string;
  'aria-describedby'?: string;
}

const MarketplaceAlert: React.FC<MarketplaceAlertProps> = ({
  icon,
  title,
  text,
  buttons = [],
  variant = 'info',
  className = '',
  'aria-label': ariaLabel,
  'aria-describedby': ariaDescribedBy,
}) => {
  const getVariantStyles = () => {
    switch (variant) {
      case 'warning':
        return 'border-accent-brand/20 bg-accent-brand/10 text-accent-brand';
      case 'success':
        return 'border-green-500/20 bg-green-500/10 text-green-600';
      case 'error':
        return 'border-accent-brand/20 bg-accent-brand/10 text-accent-brand';
      case 'info':
      default:
        return 'border-blue-500/20 bg-blue-500/10 text-blue-600';
    }
  };

  const getButtonStyles = (
    buttonVariant: AlertButton['variant'] = 'primary'
  ) => {
    switch (buttonVariant) {
      case 'secondary':
        return 'bg-background-primary text-foreground-primary border border-border-primary hover:bg-background-secondary';
      case 'danger':
        return 'bg-red-600 text-white hover:bg-red-700';
      case 'primary':
      default:
        return 'bg-accent-brand text-white hover:bg-accent-brand/90';
    }
  };

  return (
    <div
      className={`rounded-lg border p-4 ${getVariantStyles()} ${className}`}
      role='alert'
      aria-label={ariaLabel || title}
      aria-describedby={ariaDescribedBy}
    >
      <div className='flex items-start gap-3'>
        {icon && (
          <div className='flex-shrink-0' aria-hidden='true'>
            {icon}
          </div>
        )}

        <div className='min-w-0 flex-1'>
          <h3 className='mb-1 text-sm font-semibold text-white'>{title}</h3>

          {text && <p className='mb-3 text-sm opacity-90'>{text}</p>}

          {buttons.length > 0 && (
            <div className='flex flex-wrap gap-2'>
              {buttons.map((button, index) => (
                <button
                  key={index}
                  onClick={button.onClick}
                  disabled={button.disabled}
                  className={`rounded-lg px-3 py-1.5 text-xs font-medium opacity-80 transition-all hover:opacity-100 focus:ring-2 focus:ring-accent-brand/50 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${getButtonStyles(button.variant)} `}
                  aria-label={`${button.label}${button.disabled ? ' (disabled)' : ''}`}
                >
                  {button.label}
                </button>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default MarketplaceAlert;