/**
 * Sandbox Banner Component
 * Displays a prominent warning banner when in test/sandbox mode
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { FlaskConical, X } from 'lucide-react';

interface SandboxBannerProps {
  /** Whether sandbox mode is currently active */
  isSandbox: boolean;
  /** Callback to switch to live mode */
  onSwitchToLive: () => void;
  /** Optional: Allow dismissing the banner (it will reappear on page reload) */
  onDismiss?: () => void;
  /** Whether switching is in progress */
  isSwitching?: boolean;
}

const SandboxBanner: React.FC<SandboxBannerProps> = ({
  isSandbox,
  onSwitchToLive,
  onDismiss,
  isSwitching = false,
}) => {
  const { t } = useTranslation();

  // Don't render if not in sandbox mode
  if (!isSandbox) {
    return null;
  }

  return (
    <div className="bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 flex items-center justify-between shrink-0">
      <div className="flex items-center gap-3">
        <FlaskConical className="w-5 h-5 animate-pulse" />
        <div className="flex flex-col sm:flex-row sm:items-center sm:gap-2">
          <span className="font-semibold text-sm">
            {t('sandbox.bannerTitle', 'TEST MODE')}
          </span>
          <span className="text-xs sm:text-sm opacity-90">
            {t('sandbox.bannerDescription', 'You are viewing test data. Changes here won\'t affect your live business.')}
          </span>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <button
          onClick={onSwitchToLive}
          disabled={isSwitching}
          className={`
            px-3 py-1 text-xs font-medium rounded-md
            bg-white text-orange-600 hover:bg-orange-50
            transition-colors duration-150
            ${isSwitching ? 'opacity-50 cursor-not-allowed' : ''}
          `}
        >
          {isSwitching
            ? t('sandbox.switching', 'Switching...')
            : t('sandbox.switchToLive', 'Switch to Live')
          }
        </button>

        {onDismiss && (
          <button
            onClick={onDismiss}
            className="p-1 hover:bg-orange-600 rounded transition-colors duration-150"
            title={t('sandbox.dismiss', 'Dismiss')}
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>
    </div>
  );
};

export default SandboxBanner;