type StatusBadgeProps = {
  connected: boolean;
};

export const StatusBadge = ({ connected }: StatusBadgeProps) => {
  return (
    <span
      className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${
        connected
          ? 'bg-emerald-100 text-emerald-700'
          : 'bg-rose-100 text-rose-700'
      }`}
    >
      <span
        className={`mr-2 h-2 w-2 rounded-full ${
          connected ? 'bg-emerald-500' : 'bg-rose-500'
        }`}
      />
      {connected ? 'Connected' : 'Disconnected'}
    </span>
  );
};