/**
 * Sandbox Toggle Component
 * A toggle switch to switch between Live and Test modes
 */

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

interface SandboxToggleProps {
  /** Whether sandbox mode is currently active */
  isSandbox: boolean;
  /** Whether sandbox mode is available for this business */
  sandboxEnabled: boolean;
  /** Callback when mode is toggled */
  onToggle: (enableSandbox: boolean) => void;
  /** Whether a toggle operation is in progress */
  isToggling?: boolean;
  /** Optional additional CSS classes */
  className?: string;
}

const SandboxToggle: React.FC<SandboxToggleProps> = ({
  isSandbox,
  sandboxEnabled,
  onToggle,
  isToggling = false,
  className = '',
}) => {
  const { t } = useTranslation();

  // Don't render if sandbox is not enabled for this business
  if (!sandboxEnabled) {
    return null;
  }

  return (
    <div className={`flex items-center ${className}`}>
      {/* Live Mode Button */}
      <button
        onClick={() => onToggle(false)}
        disabled={isToggling || !isSandbox}
        className={`
          flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-l-md
          transition-colors duration-150 border
          ${!isSandbox
            ? 'bg-green-600 text-white border-green-600'
            : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
          }
          ${isToggling ? 'opacity-50 cursor-not-allowed' : ''}
        `}
        title={t('sandbox.liveMode', 'Live Mode - Production data')}
      >
        <Zap className="w-3.5 h-3.5" />
        <span>{t('sandbox.live', 'Live')}</span>
      </button>

      {/* Test Mode Button */}
      <button
        onClick={() => onToggle(true)}
        disabled={isToggling || isSandbox}
        className={`
          flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-r-md
          transition-colors duration-150 border -ml-px
          ${isSandbox
            ? 'bg-orange-500 text-white border-orange-500'
            : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
          }
          ${isToggling ? 'opacity-50 cursor-not-allowed' : ''}
        `}
        title={t('sandbox.testMode', 'Test Mode - Sandbox data')}
      >
        <FlaskConical className="w-3.5 h-3.5" />
        <span>{t('sandbox.test', 'Test')}</span>
      </button>
    </div>
  );
};

export default SandboxToggle;
