import React from 'react';

interface OfflineIndicatorProps {
  /** Custom class name for styling */
  className?: string;
  /** Text to show when online */
  onlineText?: string;
  /** Text to show when offline */
  offlineText?: string;
  /** Custom inline styles */
  style?: React.CSSProperties;
  /** Whether the app is currently online */
  isOnline: boolean;
}

export function OfflineIndicator({
  className = '',
  onlineText = 'Online',
  offlineText = 'Offline Mode',
  style,
  isOnline
}: OfflineIndicatorProps) {
  const defaultStyles: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    padding: '6px 12px',
    borderRadius: '9999px',
    fontSize: '14px',
    fontWeight: 500,
    transition: 'all 0.3s ease',
    ...style
  };

  const onlineStyles: React.CSSProperties = {
    ...defaultStyles,
    backgroundColor: 'rgba(34, 197, 94, 0.1)',
    color: 'rgb(34, 197, 94)',
    border: '1px solid rgba(34, 197, 94, 0.2)'
  };

  const offlineStyles: React.CSSProperties = {
    ...defaultStyles,
    backgroundColor: 'rgba(234, 179, 8, 0.1)',
    color: 'rgb(234, 179, 8)',
    border: '1px solid rgba(234, 179, 8, 0.2)'
  };

  return (
    <div
      className={className}
      style={isOnline ? onlineStyles : offlineStyles}
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        {isOnline ? (
          <>
            <path d="M5 12.55a11 11 0 0 1 14.08 0" />
            <path d="M1.42 9a16 16 0 0 1 21.16 0" />
            <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
            <line x1="12" y1="20" x2="12" y2="20" />
          </>
        ) : (
          <>
            <line x1="1" y1="1" x2="23" y2="23" />
            <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55" />
            <path d="M5 12.55A10.94 10.94 0 0 1 7.28 11.06" />
            <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88" />
            <path d="M17.88 6.12a15.91 15.91 0 0 1 4.7 2.88" />
            <line x1="12" y1="20" x2="12" y2="20" />
          </>
        )}
      </svg>
      <span>{isOnline ? onlineText : offlineText}</span>
    </div>
  );
}