'use client';
import { Wifi, WifiOff, RefreshCw } from 'lucide-react';
import { Badge, Button } from '@/components/ui';
import type { ConnectionStatus as ConnectionStatusType } from '@/lib/hooks';

type ConnectionStatusProps = {
  status: ConnectionStatusType;
  onReconnect?: () => void;
  showAsButton?: boolean;
  className?: string;
}

const getConnectionIcon = (status: ConnectionStatusType) => {
  switch (status) {
    case 'connected':
      return <Wifi className='w-4 h-4 text-green-500' />;
    case 'connecting':
      return <Wifi className='w-4 h-4 text-yellow-500 animate-pulse' />;
    case 'disconnected':
      return <WifiOff className='w-4 h-4 text-red-500' />;
    case 'updating':
      return <RefreshCw className='w-4 h-4 text-blue-500 animate-spin' />;
  }
};

const getConnectionText = (status: ConnectionStatusType) => {
  switch (status) {
    case 'connected':
      return 'Connected';
    case 'connecting':
      return 'Connecting...';
    case 'disconnected':
      return 'Disconnected';
    case 'updating':
      return 'Updating...';
  }
};

export const ConnectionStatus = ({
  status,
  onReconnect,
  showAsButton = false,
  className = '',
}: ConnectionStatusProps) => {
  if (showAsButton && status === 'disconnected' && onReconnect) {
    return (
      <Button
        variant='outline'
        size='sm'
        onClick={onReconnect}
        className={`flex items-center gap-2 cursor-pointer ${className}`}
      >
        {getConnectionIcon(status)}
        <span className='text-base'>{getConnectionText(status)}</span>
      </Button>
    );
  }

  return (
    <Badge
      variant='outline'
      className={`flex items-center gap-2 ${className}`}
    >
      {getConnectionIcon(status)}
      <span className='text-base'>{getConnectionText(status)}</span>
    </Badge>
  );
};